單行文字垂直居中的方式你可能可以脫口而出，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的英文居中是正常的，尤其是小寫字母。。
