试试用flex处理直线和其他元素居中
经常会碰到如图所示的效果
网络异常，图片无法展示
|
一般可能常用一个盒子里放线和文本，然后让文本或者线定位下。
这里考虑到更多的通用性，用下flex思维布局。
先实现两者没重叠的时候的样式
网络异常，图片无法展示
|
<div class="line-text-box"> <span class="text">我是标题</span> <div class="line"></div> </div>
.line-text-box{ display: flex; flex-direction: column; align-items: center; } .text{ padding: 0 10px; background-color: #fff; } .line{ width: 100%; height: 1px; background-color: #eee; }
那想要两者重叠，其实只要脱离文档流即可，另外考虑到两者垂直方向也是居中，所以额外还得加个属性。
.line-text-box{ /* ... */ justify-content: center; } .line{ /* ... */ position: absolute; z-index: -1; }
这种布局的好处是灵活，中间的文本可以换成多个图标，左对齐右对齐都很方便。
