如何用CSS实现文本居中并在两侧填充分隔线

最优方案：Flex布局 + 伪元素（简洁高效） #

这种方案无需额外HTML标签，利用CSS伪元素生成分隔线，通过flex布局自动分配剩余空间，适配各种宽度场景。

<div class="post-date">
  <span>2023/06/25</span>
</div>

.post-date {
  display: flex;
  align-items: center;
  gap: 16px; /* 控制文本与分隔线的间距 */
  width: 80%; /* 可根据需求调整容器宽度，默认100%占满父容器 */
  margin: 0 auto; /* 让整个模块在父容器中居中 */
}

.post-date::before,
.post-date::after {
  content: "";
  flex-grow: 1; /* 自动填充剩余空间 */
  height: 1px;
  background-color: #212931; /* 分隔线颜色 */
}

.post-date span {
  font-size: 20px;
  color: #212931;
}

备选方案：保留<hr>标签的Flex实现 #

如果你想保留原有的<hr>标签结构，同样可以用flex布局修复问题：

<div class="post-date">
  <hr>
  <p>2023/06/25</p>
  <hr>
</div>

.post-date {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 80%;
  margin: 0 auto;
}

.post-date hr {
  flex-grow: 1;
  border: none; /* 去掉hr默认的边框样式 */
  height: 1px;
  background-color: #212931;
  margin: 0; /* 清除hr默认的margin */
}

.post-date p {
  font-size: 20px;
  color: #212931;
  margin: 0; /* 清除p默认的margin */
}

原代码问题说明 #

你之前用绝对定位的方式容易导致布局脱离文档流，出现位置偏移、容器高度塌陷等问题。而flex布局是当前实现此类“内容居中+两侧自适应填充”场景最稳定、简洁的方式，无需手动计算宽度或调整定位。

内容的提问来源于stack exchange，提问作者haru