安卓使用-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. 还有很多实现垂直居中的方法 …