html中字体在移动端居中方法

一般在pc中我们不论用rem或者px，都可以使文字很好的垂直或水平居中。

但是在移动端中，文字的垂直居中会出现差异。

本文主要测试的手机是Android，因为ios对于px和rem变现都比较好，所以不做测试。

首先我们使用rem来测试，在此已经清除所有默认样式，并且设定行高和父框高度都是1.2rem。仅改变文字的大小。

pc中效果：

可以看到pc中rem表现良好。

Android手机中：

android手机中可以看到文字有明显的上移。

然后我们用px来进行测试，去除所有默认样式，元素高度、行高都是20px,仅改变文字大小。

扫描二维码关注公众号，回复： 1342695 查看本文章

在pc端：

发现文字有点偏下

在Android浏览器上：

发现跟pc一样，有点偏下，但是比rem感觉好多了。

不过由于移动端的特殊性，我们需要根据屏幕实际的宽度来计算文字的大小，所以就必须使用rem，那么如果使用rem，如何使文字垂直居中呢。

1、利用table-cell表格属性：

<div style="display: table;margin-top:0.5rem;height:1rem;width:5rem;background:#ff6300;">
    <h3 style="display: table-cell;vertical-align:bottom;font-size:1rem;color:white;line-height:1rem;">table</h3>
</div>

在pc上，十分完美。但是在Android机上：可以看到差的有点远了。

2、利用缩放：

在pc上：完美。在Android上：，居然也不错，如果父框高于字体高度的话，则完全看不出来，但是缺点是元素会占缩放前的空间，所以要使用的话还是加上定位吧。

3、用flex

在pc上完美。

在Android上：，也比较完美，如果父框高于字体高度的话，则完全看不出来。

综上所述，rem在移动端垂直居中最好的方法就是缩放和flex弹性盒子了。