移動Web單行文字垂直居中的問題

單行文字垂直居中的方式你可能能夠脫口而出，height和line-height設置爲一樣就好了，或者設置相同的padding-top和padding-bottom值。

上圖是Chrome瀏覽器下的效果，沒什麼好驚訝的，徹底符合咱們的預期。

而後咱們到移動端，設置相等的height和line-height，狀況就變的很古怪，先上個截圖（截圖來自易信的Webview）：

這個截圖來自個人魅藍，從測試那裏借了幾個Android手機，基本都是這樣顯示的，文字明顯偏上了，並且height越小越明顯：

快貼上上邊框了。。。。

由於用transform scale的方式作的1px border，因此懷疑是transform的緣由。就先把這段CSS去掉，效果挺明顯，個人魅藍以及蘋果手機都是居中的，可是依然有好多android機器依然不能居中，偏上偏下的都有。

還懷疑過是否是代碼互相影響，就寫了個demo，就是上面的截圖們，排除。

一通谷歌，也沒什麼亂用，看到有答案說line-height在移動端表現異常，而後我就換成padding的方式，依然沒什麼亂用，並且IOS此時也開始偏上了：

和line-height出奇的一致。。

 

當時的我心裏是崩潰的，多麼簡單的居中竟然這麼多幺蛾子，當時在想這必定是瀏覽器的渲染bug。。。

 

通過漫長的左改右改。。後來發現無論手機上怎麼偏上偏下，但PC上（chrome開發者工具的手機器）一直是穩穩居中的，我又回頭從新看了下本身的CSS：

/*關鍵代碼*/
{
  height: 20px;
  line-height: 20px;
  font-size: 10px;
}

沒什麼異常，可是Chrome對於中文是不支持12px如下的，小於12px的會統一顯示成12px，靈光一閃，是否是這個緣由呢，抱着試試看的態度將font-size設置成了12px。

居然居中了！！！！line-height和padding的方式都是居中的了！！！

鎖定了問題就着手解決，有人說用 -webkit-text-size-adjust: none;  ，不過沒用，最後想到了一個終極方法：

和設計溼溝通。。。。

最後統一改成12px，各個手機終於居中了，不過仍是有一個手機沒有居中，美圖手機！！！！無論他了。順便吐槽一句，這手機巨醜。。圖標巨醜。。。沒人打我吧。。。上圖一張。。。

 

查閱了一些資料，Chrome只是將中文設定最小爲12px，英文是支持10px如下的，而移動端實際上是支持12px如下字體的，但不清楚爲什麼居中異常。

因此移動端10px的英文居中是正常的，尤爲是小寫字母。。