<div class="container">
  <div class="item">
  <div class="border-top">
    <svg width="100%" xmlns="http://www.w3.org/2000/svg">
      <line x1="0%" x2="40%"stroke="red"/>
      <line x1="60%" x2="100%"stroke="red"/>
    </svg>
  </div>
  <div class="title">
    Какой то текст
  </div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aliquid soluta saepe quis iusto aperiam fugiat, architecto reiciendis quisquam laudantium?
  </div>

  <div class="item2">
  <div class="border-bottom">
    <svg width="100%" xmlns="http://www.w3.org/2000/svg">
      <line x1="0%" x2="40%"stroke="red"/>
      <line x1="60%" x2="100%"stroke="red"/>
    </svg>
  </div>
  <div class="title">
    Какой то текст
  </div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aliquid soluta saepe quis iusto aperiam fugiat, architecto reiciendis quisquam laudantium?
  </div>
</div>

.container{
  max-width: 640px;
  margin: auto;
}

.item{
  border: 1px solid red;
  border-top: 1px solid transparent;
  padding: 20px;
  position: relative;
  margin-top: 30px;
  margin-bottom: 60px;
}

.item2{
  border: 1px solid red;
  border-bottom: 1px solid transparent;
  padding: 20px;
  position: relative;
  margin-bottom: 30px;
}


.border-top{
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
}

.border-bottom{
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
}

.title{
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%,-50%);
}

.item2 .title{
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%,-50%);
}