Flanking horizontal rule

mid-height lines surrounding text, like a horizontal rule but with a gap

HTML

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS

.title {
  display:table;
  width:100%;
  background:linear-gradient(to right,white,lightgray);
}
.title-row {
  display:table-row;
}
.bar-container {
  position:relative;
  display:table-cell;
  width: 50%;
}
.bar {
  position: absolute;
  top: 55%;
  width:100%;
  border-bottom: 1px solid black;
}
.text {
  display:table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size:36px;
}