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