实现自适应Title

实现这样的标题：
中间汉字部分固定宽度，两边的线随屏幕大小变化

HTML：

<div class="title">
 <div class="line"></div>
  <div class="text">标题</div>
  <div class="line"></div>
</div>

对应的scss：

 .title {
  display: flex;
   width: 80%;
   margin: 28px auto 24px;
   .line {
     flex: 1;
     position: relative;
     top: -6px;
     border-bottom: 1px solid rgba(255, 255, 255, .2);
   }
   .text {
     padding: 0 10px;
     font-size: 14px;
     font-weight: 700;
   }
 }

具体细节可以自己调整