如何让Firefox与Chrome中align-items:center的文本对齐效果一致？

我创建了如下div元素：

<div class="letter">X</div>

并为其添加Flexbox的align-items:center样式，代码如下：

.letter {  
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

在Chrome浏览器中，文本能如预期垂直居中，但Firefox会把文本的下行空间（如下部延伸部分descenders）纳入居中计算，导致文本看起来偏上（非文本元素无此差异）。如何通过CSS实现跨浏览器一致的显示效果？

补充示例代码：

html {
  background: #000
}

.letter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  background-color: blue;
  font-size: 80px;
  width: 1em;
  height: 1em;
  border-radius: 100%;
}

<div class="letter">
  X
</div>
<div class="letter">
  g
</div>
<div class="letter">
  Ä
</div>

Chrome OS X显示效果：

Firefox OS X显示效果：

这个差异源于Chrome和Firefox对Flex容器中文本基线的处理逻辑不同，以下是几种可靠的修复方法：

方法1：设置line-height: 1 #

给.letter添加line-height: 1，同时消除文本额外的换行/空格（或用white-space: nowrap强制不换行），这样能让Firefox的居中计算逻辑和Chrome对齐：

.letter {  
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  line-height: 1;
  white-space: nowrap;
}

方法2：用place-content: center替代属性组合 #

虽然功能上和justify-content + align-items类似，但部分场景下能触发更一致的布局渲染：

.letter {  
  display: flex;
  place-content: center;
  font-weight: bold;
  color: white;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  line-height: 1;
}

方法3：将文本包裹在内部元素中单独控制 #

把文本放在span标签内，单独给内部元素设置line-height，隔离文本的布局影响：

<div class="letter"><span>X</span></div>

.letter {  
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.letter span {
  line-height: 1;
}

方法4：针对大字号场景的精确调整 #

如果使用超大字号，除了设置line-height:1，还可以通过微调vertical-align或padding来修正，但核心还是保证文本实际占据高度与字号一致，避免浏览器引入额外的行高空间。

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