安卓使用 line-height 實現垂直居中存在偏移

問題描述

一般，單行文字實現垂直居中，習慣用 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. 還有不少實現垂直居中的方法...