Flex布局下设置align-self:center垂直居中数字时位置上偏如何解决

问题根因 #

你遇到的偏移是字体排版的固有特性导致的：默认状态下浏览器计算行盒中心时，会同时兼容带上下伸部的全字符集（比如带下垂部分的小写字母g、y、p），即使你的内容只有无下伸部的数字、全大写字母，系统也会为下伸部预留排版空间，最终导致实际显示的字符视觉中心高于行盒中心，而flex的align-self: center是严格对齐子元素盒子的物理中心，自然就出现了视觉上的不居中。

解决方案 #

方案1：em单位padding偏移（兼容性最好） #

这是实测可落地的方案，优势是偏移量和字号强绑定，后续修改字号不需要重新调整偏移值：

.container {
  height: 4.5cm;
  display: flex;
  background-color: #c2fcb6;
}
.child {
  font-size: 96pt;
  align-self: center;
  padding-top: 0.3em;
}

<div class="container">
  <div class="child">42</div>
</div>

提示：0.3em是通用适配值，你可以根据自己使用的字体特性，在0.25~0.35em区间内微调达到最精准的居中效果。

方案2：行高重置+transform偏移（不改变盒模型） #

如果需要严格控制子元素的占位尺寸，不想用padding撑开盒子，可以用这个方案：

.child {
  font-size: 96pt;
  align-self: center;
  /* 消除默认行高的预留空间 */
  line-height: 1;
  /* 向下做小幅度偏移对齐视觉中心 */
  transform: translateY(0.1em);
}

方案3：字体特性适配（无额外偏移） #

如果你的项目用的是OpenType规范的标准字体，可以直接调用字体的等宽数字特性，配合行高1就可以实现无偏移居中：

.child {
  font-size: 96pt;
  align-self: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

兼容性建议 #

为了避免不同操作系统自带字体的排版参数差异导致的偏移不一致，建议项目中使用统一的Web字体，保证多端渲染效果一致。

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