H5字体在移动端居中问题

在混合开发中，作为一个H5工程师，你的工作难度不是很大，但是你遇到的bug却不少。总结的来说，其实都是一些兼容性问题。

解决方案：

1、添加border相关属性：

• border:1px solid transparent;

2、针对Android 7.0+设备

• 上设置lang属性：,同时font-family不指定英文，如font-family:sans-serif。这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示，blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会导致英文fallback到Noto Sans Myanmar。

3、针对MIUI 8.0+设备：

• 设置font-family:miui。直接指定这个字体为family name:miui

4、使用transform scale缩放操作

• 有些时候你会用line-height这种土方法来进行垂直居中，但是他一样会有问题。所以使用transform:scale(.5);

5、使用line-height+font-size一半

• 最近发现使用line-height的时候有些机型会出现古怪，尤其是你的字体大的时候，然后我就设置了一下line-height，首先是将line-height设置成父元素的高度，然后发现字体偏上，然后将line-height的值设置成父元素的高度+字体大小的一般就差不多了

6、使用弹性布局（flex）

• display:flex
• justify-content:center
• align-items:center