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

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

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

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

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

一、使用<hr>

<div class="box">
    <hr class="line">我是文字<hr class="line">
</div>

.line{
    display:inline-block;
}

二、三个<span>

<div class="box">
    <span class="line"></span>
    <span class="text">我是文字</span>
    <span class="line"></span>
</div>

.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;
}

三、一个<span>（推荐）

可自适应。

<div class="line">
  <span class="text">我是文字</span>
</div>

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

四、单标签+line-height

<div class="line">我是文字</div>

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

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

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