安卓移动端line-height垂直居中出现偏移的原因,及解决方法
目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

左图中的字号是12px,右图中的行高是26px。仔细观察过上图后,闲话少扯,直接说说我对这个android上line-height问题的一些看法:
- 字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
- 尽量不要使用rem或者em的单位,除非你能对字号的把握在每个手机上都能达到第1条的要求。别外,微信小程序上的rpx是动态计算的,可以单独针对这部分使用px。
- 一般只要不是边框贴着文字,一般都还看得过去,在接受的范围之内。如果是边框贴着文字,就是居中了,也不好看啊。
那么,对于小于12像素的居中或者是对居中要求很是严格的需求,这个问题怎么解决?
- 把字号内外边距等设置为需求大小的2倍,使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放,如果是父级自适应高度且可展示多行的,使用transform是有问题的。因为transform缩放是不影响页面布局的。
- 把字号内外边距等设置为需求大小的2倍,使用zoom进行缩放,可以完美解决。zoom原本只有ie支持,但现在除了Firefox,都已经支持了。是的,Firefox不支持。
导致line-height偏移的本质原因 :
作者:周祺,来源链接:https://www.zhihu.com/question/39516424/answer/274374076
其它解决方法:
border: 1px solid transparent;
box-sizing:border-box;2.采用其它垂直居中方法:
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!