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

標籤：

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

是Chrome瀏覽器下的效果，沒什麼好驚訝的，完全符合我們的預期。

然後我們到移動端，設定相等的height和line-height，情況就變的很古怪，先上個（來自易信的Webview）：

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

快貼上上邊框了。。。。

因為用transform scale的方式做的1px border，所以懷疑是transform的原因。就先把這段CSS去掉，效果挺明顯，我的魅藍以及蘋果手機都是置中的，但是依然有好多android機器依然不能置中，偏上偏下的都有。

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

一通Google，也沒什麼亂用，看到有答案說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的英文置中是正常的，尤其是小寫字母。。

 

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