如何使文本在水平线之间居中？

在水平规则内居中文本

为了创建位于居中文本两侧的水平线，人们提出了各种解决方案，每种方案都有其自身的局限性。

一种常见的方法是使用多个

<div>元素并浮动它们：

<div>

但是，这种方法可能会产生对齐问题。同样，使用表格可能会导致未对齐：

<table><tr>
  <td>

随着 Flexbox 的引入，出现了一种更简洁的解决方案：

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

这种方法提供了精确的对齐并消除了需要用于复杂的标记或“模糊”解决方案。