頁面佈局——分割線中間帶文字

.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如何實現中間有文字的分割線效果？