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，高度用奇数