安卓下垂直居中遇到的坑

1. 需求

• 使用line-height垂直居中單行文字；
• 使用僞元素vertical-align: middle;來垂直居中圖片；

2. 遇到的坑

在安卓手機上用以上方法垂直居中的文字及圖片都偏上。

3. 問題

致使這個問題的本質緣由多是 Android 在排版計算的時候參考了primyfont字體的相關屬性（即HHead Ascent、HHead Descent等），而primyfont的查找是看 font-family裏哪一個字體在fonts.xml裏第一個匹配上，而原生Android下中文字體是沒有family name的，致使匹配上的始終不是中文字體，因此解決這個問題就要在 font-family裏顯式申明中文，或者經過什麼方法保證全部字符都fallback到中文字體。

4. 解決

爲 html 標籤添加 lang="zh-CN" 屬性，該屬性值只針對中文頁面，外文頁面設置其餘對應屬性值。可用安卓手機查看如下栗子復現：

CodePen

參考連接

• 知乎|Android瀏覽器下line-height垂直居中爲何會偏離？|周祺
• 關於 Android 下 line-height 文字垂直居中偏移的思考