安卓使用lineheight实现垂直居中存在偏移

问题描述

通常，单行文字实现垂直居中，习惯用 line-height: @heigtht 解决

该方法在 浏览器 和 IOS 中都没有问题，但是在安卓中，会出现轻微向上偏移

浏览器 和 IOS

安卓

如何解决

1.通过 ·line-height + padding 组合方式解决

div{
width: 3rem;
// line-height: 0.8rem;
height: 0.8rem;
font-size: 0.28rem;
line-height: 0.24rem;
padding: 0.28rem 0;
}

2. flex布局

div{
width: 3rem;
height: 0.8rem;
font-size: 0.28rem;
display: flex;
align-items: center;
justify-content: center;
}

3. 可以先将原来包括 font-size 在内的属性放大两倍，再用 scale 缩小一倍

（该方法需要注意，当2倍高度或宽度超过设置的body的最大宽度或者高度时，scale缩放依然根据2倍大小的位置进行缩放，所以会出现位置偏移 ）

.content {
width: 6rem;
height: 1.6rem;
line-height: 1.6rem;
font-size: 0.56rem;
transform: scale(0.5);
transform-origin: 0% 0%;
}

4. 包一层table(不推荐使用)

5. 还有很多实现垂直居中的方法&＃8230;