如何用HTML和CSS实现左右带文字的中间分隔线效果？

给你两种简单易上手的实现方法，都是适合新手的写法：

方法一：Flex+伪元素（代码最简洁） #

这种方法不需要额外的HTML元素，用CSS伪元素生成分隔线，结构清爽：

HTML结构 #

<div class="split-line">
  <span>左侧文字</span>
  <span>右侧文字</span>
</div>

CSS样式 #

.split-line {
  display: flex;
  align-items: center; /* 让文字和分隔线垂直居中对齐 */
  gap: 15px; /* 控制文字和分隔线之间的间距 */
  width: 80%; /* 可以根据页面需求调整容器宽度 */
  margin: 30px auto; /* 让整个模块在页面中水平居中 */
}

/* 生成左右两条分隔线 */
.split-line::before,
.split-line::after {
  content: '';
  flex: 1; /* 让两条分隔线自动平分容器剩余空间 */
  height: 1px;
  background-color: #ddd; /* 分隔线颜色，可自定义 */
}

方法二：多元素结构（更直观，适合新手理解） #

如果觉得伪元素不好懂，可以用三个独立元素分别对应左侧文字、分隔线、右侧文字：

HTML结构 #

<div class="split-box">
  <div class="left-word">左侧文字</div>
  <div class="divider"></div>
  <div class="right-word">右侧文字</div>
</div>

CSS样式 #

.split-box {
  display: flex;
  align-items: center;
  width: 80%;
  margin: 30px auto;
}

.left-word, .right-word {
  white-space: nowrap; /* 避免文字换行打乱布局 */
  padding: 0 15px;
}

.divider {
  flex: 1;
  height: 1px;
  background-color: #ddd;
}

关于你之前尝试的方法 #

你之前用left:50%和right:50%的div没成功，大概率是因为没给父元素设置position: relative（绝对定位的元素需要相对定位的父元素作为基准），而且这种绝对定位的方式需要手动计算文字宽度来调整位置，很容易出现文字和分隔线重叠、布局错位的问题，不如上面的flex布局灵活好维护。

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