试试用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;
}

这种布局的好处是灵活，中间的文本可以换成多个图标，左对齐右对齐都很方便。