css - 移动端页面文字垂直居中兼容性问题

Answer 1

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

Answer 2

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

Answer 3

你可以試試vertical-align，另外，沒有代碼別人不好回答，你可以用codepen做在線demo，方便回答者

Answer 4

用flex佈局，幾句程式碼就搞定垂直居中了。教學搜尋就有了

Answer 5

1.表格方法：

實作方法：表格內容本來就是垂直居中的，可以透過模擬表格處理。

<p class="box_center">
    <p class="inner"></p>
</p>

.box_center {
    display: table-cell;
    width: 300px;
    height: 300px;
    text-align: center;
    vertical-align: middle;
}
.box_center .inner {
    display: inline-block;
}

2.vertical-align: middle
實作方法：利用空元素佔位實現

<p class="box_center">
    <p class="placeholder"></p>
    <p class="inner"></p>
</p>

.box_center {
    width: 300px;
    height: 300px;
    text-align: center;
}
.box_center .inner {
    display: inline-block;
}
.box_center .placeholder {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

3.絕對定位

.box_center {
    width: 300px;
    height: 300px;
    background: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

4.使用 transform 實作

.box_center {
    position: absolute;
    width: 300px;
    height: 300px;
    background: #ccc;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

相容性：Android2.3 系統瀏覽器不支援容器直接使用 fixed 進行定位，外加 fixed 容器可解決。

結論：

推薦transform 實作

Answer 6

雷雷

Answer 7

你的line-height改30px試試

Answer 8

line-height和vertical-align一起使用才更配哦

Answer 9

模擬器模擬出來的是垂直居中的沒錯，但是在實際手機中，蘋果手機渲染出來是垂直居中的，安卓手機渲染出來就是會偏上一些，相容的方法就是不要設定height，line- height設定為1，用padding值上下相等來保持垂直居中。

Answer 10

像素密度問題，例如你是20px的高，行高也是20px，如果像素密度是偶數，也沒問題，如果是奇數，就有問題了，所以一般最好高度和字體大小設定匹配，例如文14px，高度也用偶數，文字15px，高度用奇數