如何跨浏览器垂直居中存在下行间距问题的系统默认等宽字体

是否存在一种方法，能在各浏览器中让系统默认的等宽字体在容器内始终垂直居中对齐？即使像Nimbus Mono PS这类存在异常下行间距的字体也能生效？我希望使用用户电脑上的默认等宽字体，之前我的设备默认是Nimbus Mono PS，现已更换。

Devtools截图：

初始实现代码 #

* {
  box-sizing: border-box;
}

.cell {
  display: grid;
  place-content: center;
  width: 2em;
  height: 2em;
  font-size: 4rem;
  font-family: monospace;
  background-color: gold;
}

<div class="cell">
  2
</div>

尝试1：固定内边距（仅当前设备生效） #

用魔法值内边距调整，仅在自身设备有效，更换字体后失效。

* {
  box-sizing: border-box;
}

.cell {
  display: grid;
  place-content: center;
  width: 2em;
  height: 2em;
  padding-block-start: 0.3em;
  font-size: 4rem;
  font-family: monospace;
  background-color: gold;
}

<div class="cell">
  2
</div>

尝试2：行高/垂直对齐（无效） #

调整行高和垂直对齐属性，对异常字体无效果。

* {
  box-sizing: border-box;
}

.cell {
  display: grid;
  place-content: center;
  width: 2em;
  height: 2em;
  font-size: 4rem;
  font-family: monospace;
  background-color: gold;
}

.cell span {
  line-height: 1ch;
  vertical-align: top;
}

<div class="cell">
  <span>2</span>
</div>

可行解决方案 #

方案1：伪元素辅助垂直对齐（最可靠） #

通过伪元素占据容器高度，让内容与伪元素垂直居中，彻底绕过字体行高差异：

* {
  box-sizing: border-box;
}

.cell {
  width: 2em;
  height: 2em;
  font-size: 4rem;
  font-family: monospace;
  background-color: gold;
  text-align: center; /* 水平居中 */
}

.cell::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.cell span {
  display: inline-block;
  vertical-align: middle;
}

<div class="cell">
  <span>2</span>
</div>

方案2：Flex布局配合行高修正 #

用Flex实现居中，同时将内容的行高设为1，减少字体自身行高的干扰：

* {
  box-sizing: border-box;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  font-size: 4rem;
  font-family: monospace;
  background-color: gold;
}

.cell span {
  line-height: 1;
  /* 极端情况可通过transform微调，无需固定值 */
  /* transform: translateY(-1%); */
}

<div class="cell">
  <span>2</span>
</div>

原理说明 #

等宽字体的垂直偏移问题，本质是不同字体的基线位置、升部/降部比例设计不同（比如Nimbus Mono PS的降部预留空间过大）。上述方案不依赖字体自身的行高属性，而是通过容器的物理高度强制对齐内容，从而实现跨字体、跨浏览器的稳定垂直居中。

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