CSS实现文字嵌入水平线 适配多字号无需固定值与双伪元素

• 父容器.ruler强制设置height: 0，子元素用transform: translateY(-50%)上移的距离完全取决于子元素自身高度：12px字号和16px字号的元素高度不同，加上字体本身基线渲染的偏差，最终文字和水平线的相对位置会出现偏移，无法统一居中效果。
• 实现逻辑依赖和字号绑定的偏移计算，没有从布局层面让水平线和文本自动适配居中。

不需要使用::before/::after两个伪元素做分隔线，直接用CSS渐变作为父容器的背景生成1px居中水平线即可，全程不使用固定偏移数值，任意字号的文本都能自动和水平线保持居中对齐。

完整实现代码：

.ruler {
  /* 生成1px粗的黑色水平线，垂直居中、水平铺满容器 */
  background: linear-gradient(#000, #000) center / 100% 1px no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ruler span {
  background: #fff;
  padding: 0 2px;
  font-weight: 500;
}

.text1 {
  font-size: 12px;
}

.text2 {
  font-size: 16px;
}

<div class="ruler">
  <span class="text1">MyText</span>
</div>
<br>
<br>
<div class="ruler">
  <span class="text2">MyText</span>
</div>

实现原理：父容器高度完全由内部文本撑开，渐变生成的1px黑线默认固定在父容器的垂直中点位置，文本自带白色背景盖住中间段的黑线，自然形成文字嵌在水平线中的效果。文本字号变化时父容器高度自动适配，黑线始终保持在居中位置，不需要额外计算偏移，flex布局也彻底规避了不同浏览器默认行高、字体基线带来的对齐偏差。

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