为何align-items无法使文本垂直居中？Mac Firefox专属Bug

针对Mac版Firefox 107的这个专属Bug，以下是几个能随字号自适应的解决办法：

方案一：强制文本行高为1 #

给文本元素设置 line-height: 1，消除大字号字体默认行高带来的额外垂直空间，再配合flex布局实现精准居中：

div {
  border: 1px solid black;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
}
span {
  line-height: 1;
}

方案二：改用CSS Grid布局 #

Grid布局在文本垂直居中的表现上更稳定，能避开这个Firefox的flex布局Bug：

div {
  border: 1px solid black;
  padding: 0;
  display: grid;
  place-content: center;
  font-size: 5rem;
}

方案三：调整字体基线属性 #

通过CSS字体属性强制调整字体的上下比例，从底层解决对齐问题，数值可根据使用的字体微调：

div {
  border: 1px solid black;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  ascent-override: 90%;
  descent-override: 10%;
}

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