移動端 line-height 不垂直居中問題

本文是從簡書複製的, markdown語法可能有些出入, 想看"正版"和更多內容請關註 簡書: 小賢筆記

一般情況下, 我們把 line-height 的值設置為 height 的值, 就可以實現文字垂直居中

但貌似移動端不太友好, 文字總是略微偏上一點點, 這看上去就很不舒服了, 很影響用戶體驗

考慮過加上 padding: xxrem 0, 但結果還是不太滿意...

最終找到兩種解決辦法, 代碼如下

• 方法一

span {
    width: 1rem;
    height: 1rem;
    font-size: 0.12rem;
    color: green;
    background: lightblue;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

• 方法二 (僅限於字數固定情況)

span {
    font-size: 0.12rem;
    color: green;
    background: lightblue;
    padding: 0.03rem 0.15rem;
}