经典的横线中间文字css布局---flex布局

html:

　　<div class="title">
　　　　<div class="line"></div>
　　　　<div class="text">ddd</div>
　　　　<div class="line"></div>
　　</div>

css:

　　.title{width:80%;display:flex;margin:30px auto 24px;}
　　.line{flex:1;border-top:1px solid rgba(255,255,255,0.2);position: relative;top:6px;}
　　.text{padding:0 12px;font-size:14px;}