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

但是在移動端中，文字的垂直居中會出現差異。

本文主要測試的手機是Android，因為ios對於px和rem變現都比較好，所以不做測試。

首先我們使用rem來測試，在此已經清除所有預設樣式，並且設定行高和父框高度都是1.2rem。僅改變文字的大小。

pc中效果：

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

Android手機中：

android手機中可以看到文字有明顯的上移。

然後我們用px來進行測試，去除所有預設樣式，元素高度、行高都是20px,僅改變文字大小。

在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彈性盒子了。