【布局】标题（图标）在横线的中间！

用到的知识点：水平垂直居中、定位、层级等。

<div class="line-icon">
    <p></p>
    <span>标题</span>
</div>

　　.line-icon{
　　　　position: relative;
      height:50px;
      width:100%;
      border:1px solid black;
    }
    .line-icon p,.line-icon span{
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      background:red;
    }
    .line-icon p{
      top:10px;
      height:1px;
      width:50%;
      z-index:-1;
    }
    .line-icon span{
      height:30px;
      width:50px;
      line-height:30px;
      text-align:center;
      z-index: 1;
      background: white;
    }