标题（图标）在横线的中间！

请看：https://blog.csdn.net/wuli_youhouli/article/details/113098020

最终效果：

HTML:

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

<style>
　　.line-icon{
 3　　　　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;
    }
</style>

在布局中常见的标题效果，但是可以通过这个举一反三。这个效果可以拓展出水平垂直居中、定位、层级等知识。