页面布局——分割线中间带文字

.box可设置height、line-height    .text可设置margin

上下居中可使用vertical-align:middle;或justify-content:center;

左右居中可使用text-align:center;

自适应宽度可使用width+float或flex-grow

一、使用

---

    
我是文字

.line{
    display:inline-block;
}

二、三个

    
    我是文字
    

.line{
    display:inline-block;
    border-top:1px solid #000;
}

flex实现（推荐），可自适应。

.box{
  display:flex;
  align-items:center;
}
.line{
  border-top:1px solid #000;
  flex-grow:1;
}
.text{
  margin:0 10px;
}

三、一个（推荐）

可自适应。

  我是文字

.line{
  height:0;
  border-top:1px solid #000;
  text-align:center;
}
.text{
  position:relative;
  top:-14px;
  background-color:#fff;
}

四、单标签+line-height

我是文字

.line{
    line-height:1px;
    border-left:200px solid #000;
    border-right:200px solid #000;
    text-align:center;
}

CSS巧妙实现分隔线的几种方法

html与css如何实现中间有文字的分割线效果？