Android瀏覽器下line-height垂直居中為什麼會偏離？

07-06

對一個元素設置了line-height等於height垂直居中，但是在Android的瀏覽器上為什麼總會偏上一點？見圖中彩色的興趣標籤內的文字
正常情況（如ios）：

android中的情況：
看到了相關問題，但不確定是否因此導致：讓line-height等於height，使文字垂直居中的方法，是否與字體有關？ - 前端開發

這個問題通過css是無法解決的，即使解決了也是一種通過微調來實現的hack方法，因為文字在content-area內部渲染的時候已經偏移了，而css的居中方案都是控制的整個content-area的居中。

導致這個問題的本質原因可能是Android在排版計算的時候參考了primyfont字體的相關屬性（即HHead Ascent、HHead Descent等），而primyfont的查找是看`font-family`里哪個字體在fonts.xml里第一個匹配上，而原生Android下中文字體是沒有family name的，導致匹配上的始終不是中文字體，所以解決這個問題就要在`font-family`里顯式申明中文，或者通過什麼方法保證所有字元都fallback到中文字體。根據這2個思路，目前我找到了2個解決方案：

針對Android 7.0+設備：&上設置 lang 屬性：&，同時font-family不指定英文，如 font-family: sans-serif 。這個方法是利用了瀏覽器的字體fallback機制，讓英文也使用中文字體來展示，blink早期的內核在fallback機制上存在問題，Android 7.0+才能ok，早期的內核下會導致英文fallback到Noto Sans Myanmar，這個字體非常丑。
針對MIUI 8.0+設備：設置 font-family: miui 。這個方案就是顯式申明中文的方案，MIUI在8.0+上內置了小米蘭亭，同時在fonts.xml里給這個字體指定了family name：miui，所以我們可以直接設置。

一般是因為行高或字體大小是奇數導致的

我也遇到過，so，我的解決辦法是：

font-size: 26px;/*px*/ width: 144px; height: 50px; /*px*/ line-height: 50px; /*px*/ background-color: #5E99F5; color: #fff; /*border用來解決安卓端字體偏上的問題*/ border: 1px solid transparent; text-align: center; border-radius: 6px; float: right;

後面的/*px*/不用管，我用的插件，但是border我看了的確對字體向上偏移有影響，所以，用一個

border: 1px solid transparent;

應該能解決

table-cell我也試過，為啥沒用？是我用法不對？

好像目前包括騰訊在內，對這個問題都沒有很好的解決，不用太在意，實在強迫症的話可以通過其他方法

line-height、table-cell、absolute都試過了 ios完美適配安卓秒掛

同問啊，這是個讓人惱火的問題

不同版本和廠商的webview的默認行高可能不一樣。

iOS和Android的就不一樣，我之前都是分開處理的……

行高影響的吧

我也發現了這個問題不存在於微信瀏覽器 qq瀏覽器6.1 webkit37水平 android5.1瀏覽器 webkit40水平不過chrome46貌似解決了這個問題應該是瀏覽器字體渲染問題

近期發現，IOS對小數的像素很敏感但是Android就不是，例如Android上 1.3px = 1.5px = 1.7px = 1px; 就是說小數點會被省略，但是在IOS上有很大的差異，可以利用這個特性解決垂直居中問題，就比如說 padding-top: 10.1px; 和padding-bottom: 9.9px; Android上就變成了padding-top: 10px; padding-bottom: 9px; 但在IOS上只差0.2px，呵呵呵，調調細節很容易就居中了

用table-cell可以達到兼容完美效果，用flex 也可以，但是好想效果沒有table-cell好

垂直居中可以使用flex布局來做，比如：

height: 36px;

display: flex;

align-items: center;

我們線上的移動端頁面垂直居中我一直都是這麼寫的，三端表現都很一致。

兼容性問題可以使用postcss解決。