移动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的英文居中是正常的，尤为是小写字母。。