如何在HTML/CSS中实现自动居中的重叠字符？

不用再手动调letter-spacing了，用CSS定位+transform就能让第二个字符自动居中叠在第一个上面，完美适配非等宽字体：

基础实现代码 #

<span style="position: relative; display: inline-block;">
  p
  <span style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">w</span>
</span>

原理说明 #

• 外层<span>设为relative定位+inline-block，既能跟着字符宽度自适应，又能作为内层绝对定位元素的参考容器
• 内层第二个字符用absolute定位，left:50%和top:50%把元素左上角移到容器中心，再通过transform: translate(-50%, -50%)把元素自身的中心和容器中心对齐，不管字符宽高多少都能精准居中
• 如果想微调上下位置，比如让第二个字符往上挪一点，改transform的Y轴值就行，比如translate(-50%, -10%)

封装成CSS类方便复用 #

如果要频繁用，把样式抽成类更高效：

.char-overlap {
  position: relative;
  display: inline-block;
}
.char-overlap__top {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

使用时直接套结构：

<span class="char-overlap">
  p
  <span class="char-overlap__top">w</span>
</span>
<span class="char-overlap">
  x
  <span class="char-overlap__top">y</span>
</span>

这样换任何字符都不用手动调整参数，直接自动居中重叠。

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