移動端頁面文字垂直居中兼容性問題

問題描述

第1張圖是chrome模擬器里的效果。第2、3張圖是兩臺手機里的效果。第4張圖是按鈕的樣式。

按鈕的高度和行高相等，文字應該垂直居中。第1張圖chrome模擬器中是正確的，第2張圖中的效果也基本正常，但第3張圖中的文字明顯偏上了。單位試過 rem，也試過 px，都會存在這種情況。有沒有人能分析一下問題的原因？有沒有完全兼容的解決方案？

明確一下我的問題：一行文字，在該行垂直方向居中，PC端正常，移動端有的正常，但有的沒有垂直居中，這個問題是怎么產生的，有沒有解決方案？

默認長寬字體大小先擴大為兩倍，再用 scale 縮小為一半大小后的結果，效果確實好了一點，但感覺還是有一點點偏上。

問題解答

我也遇到了這個問題，原本用< a >標簽寫的按鈕，后來改用button就好了。給個高度，不用寫行高，自動垂直居中。

目前比較有效的解決方法就是transform，放大一倍再縮小一半，但是寫起來繁瑣而且影響布局。我也想知道有沒有什么既好又方便的方法

今天這個問題也糾結了研究了好久，安卓機下表現異常，PC、蘋果機表現良好，如果一般情況，用margin偏移量來對齊，極端情況還是transform絕對定位居中比較靠譜。