请看:https://blog.csdn.net/wuli_youhouli/article/details/113098020
最终效果:
HTML:
1 <div class="line-icon"> 2 <p></p> 3 <span>标题</span> 4 </div>
1 <style> 2 .line-icon{ 3 position: relative; 4 height:50px; 5 width:100%; 6 border:1px solid black; 7 } 8 .line-icon p,.line-icon span{ 9 position:absolute; 10 top:50%; 11 left:50%; 12 transform: translate(-50%,-50%); 13 background:red; 14 } 15 .line-icon p{ 16 top:10px; 17 height:1px; 18 width:50%; 19 z-index:-1; 20 } 21 .line-icon span{ 22 height:30px; 23 width:50px; 24 line-height:30px; 25 text-align:center; 26 z-index: 1; 27 background: white; 28 } 29 </style>
在布局中常见的标题效果,但是可以通过这个举一反三。这个效果可以拓展出水平垂直居中、定位、层级等知识。