为何部分设备上的文本无法实现垂直居中？

问题场景 #

盒子内的文本在PC端显示垂直居中，但在移动端会略微偏上，对应实现代码如下：

SCSS代码 #

.single-size{
    text-align: center;
    a{
        padding: 1rem;
        font-size: 2rem;
        display: block;
        border: .1rem solid #D8D8D8;
        &.active{
            background-color: $secondary;
            border: .1rem solid $secondary;
            color: #fff;
        }
    }
}

HTML代码 #

<div class="single-size">
    <a href="#" class="attribute">XXL</a>
</div>

效果对比 #

• PC端正常居中：
• 移动端文本偏上：

核心原因分析 #

• 字体渲染引擎差异：PC端（如Windows DirectWrite、Mac CoreText）与移动端（安卓Skia、iOS移动端CoreText）的字体渲染逻辑不同。部分大字号字体在移动端渲染时，会保留字体原始的上行/下行空间，而padding的盒模型计算未抵消这部分空间，导致视觉上文本偏上。
• 未显式定义行高：当前仅通过padding撑高容器，未设置line-height。不同设备默认行高的计算比例存在差异，移动端默认行高可能更小，或字体基线偏移，使得文本在padding区域内垂直分布不均。
• rem单位精度损耗：移动端设备DPI更高，rem转换为物理像素时可能出现精度丢失。比如1rem在部分设备上转换后，上下padding的物理像素高度不一致，间接造成文本视觉偏移。
• 字体基线设计特性：部分字体的基线位置并非完全居中，PC端渲染时会自动微调基线偏移以优化视觉居中，而移动端严格遵循字体原始设计，导致文本在容器内视觉偏上。

内容的提问来源于stack exchange，提问作者Uros Dioda Rakic