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

原文地址:https://www.cnblogs.com/zjzhome/p/4898898.html