Firefox浏览器下flex布局大字号文本垂直水平居中兼容问题求解

问题原因 #

1. 新增大字号后元素偏移的原因 #

• 你误用了align-content: center属性：该属性仅在flex容器开启换行（flex-wrap: wrap）时生效，作用是控制多行flex项在交叉轴的整体分布，你的容器默认flex-wrap: nowrap，因此该属性从始至终没有实际生效。
• 未主动设置交叉轴对齐属性时，flex容器默认值为align-items: normal，字号较小时内容尺寸远小于5rem的容器，视觉上近似居中；当字号增大到8rem后，+号字符本身的宽度、默认行高都超过了容器尺寸，叠加文本基线对齐的默认规则，就会出现明显的视觉偏移。

2. 添加align-items: center后Firefox不生效的原因 #

Firefox浏览器存在已知的兼容特性：<button>标签作为flex容器时，浏览器UA样式会生成匿名内容包裹层，你给button设置的flex相关属性会作用在这个匿名层上，无法直接作用于你自定义的子元素.mark，因此会出现align-items设置不生效的问题。

修复方案 #

推荐两种兼容全浏览器的修复方式：

方案一：修正flex配置+适配Firefox兼容 #

删除无效的align-content配置，同时给子元素添加样式抵消浏览器默认规则的影响：

.close-button {
  margin-top: auto;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 5rem;
  background: black;
  color: white;
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  /* 新增，控制交叉轴对齐 */
  align-items: center;
  font-size: 8rem;
}
/* 新增子元素样式，抵消大字号基线偏移和Firefox兼容问题 */
.close-button .mark {
  line-height: 1;
  /* 如有细微偏移可调整百分比微调 */
  transform: translateY(2%);
}

方案二：改用grid布局（更简洁稳定） #

grid布局实现单元素居中不需要区分轴方向，且Firefox下button作为grid容器的兼容表现远好于flex：

.close-button {
  margin-top: auto;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 5rem;
  background: black;
  color: white;
  width: 5rem;
  height: 5rem;
  font-size: 8rem;
  /* 替换flex为grid，两行实现全浏览器居中 */
  display: grid;
  place-content: center;
}

该方案不需要额外设置子元素样式，所有主流浏览器均可正常生效。

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