整理一下关于”移动端line-height不能垂直居中的问题“的部分解决方案
问题背景
先说下问题背景吧，相信很多做移动端的朋友都遇到过这个问题，就是我们在设置某一个按钮的行高等于按钮本身高度的时候，在不容的手机下显示的效果会有不同，很多设备不能居中，这种现象在安卓机下面尤为严重
此问题不包括以下情况
- 设置border并同时设置box-sizing:border-box的情况
- 文字设置成12px以下的情况
- line-height 减去 font-size 是奇数的情况
- 使用rem作为line-height或者font-size的单位（会导致出现小数的px单位）的情况
问题原因
对于出现此问题的原因，互联网上有以下几种解释：
- viewport设置成initial-scale=1的时候，物理像素和逻辑像素转换时候出现的误差
- 英文字体和中文字体同行出现的时候，不同的渲染规则导致的行高不一致
解决方案
解决方法也查到很多，这里整理一下
- 去掉viewport的设置（问题会更多，这根本不算是解决办法）。
- 设置元素的line-height:normal;用padding撑开容器高度。
- 字号内外边距等设置为需求大小的2倍，使用transform进行缩放。
- 针对Android 7.0+设备：上设置 lang 属性：，同时font-family不指定英文，如 font-family: sans-serif。
这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示，blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会导致英文fallback到Noto Sans Myanmar，这个字体非常丑。
- 利用安卓不能识别小数px单位的特点。比如设置line-height:18.5px;安卓下会渲染成line-height:18px。
- 设置display:table-cell。
1
2
3display: table-cell;
text-align: center;
vertical-align: middle;
本文只是粗略的整理，并不全面，也不一定准确，另外，其中的解决方案并没有进行完全测试，如需要在生产环境中使用，请自行测试并选择