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

Answer 1

The current more effective solution is transform, which doubles the size and then reduces it by half, but it is cumbersome to write and affects the layout. I also want to know if there is any good and convenient method

Answer 2

I have been struggling with this problem for an afternoon today. The performance on Android is abnormal, but the performance on PC and Mac is good. If it is normal, use margin offset to align. In extreme cases, it is more reliable to transform absolute positioning and center.

Answer 3

You can try vertical-align. In addition, it is difficult for others to answer without code. You can use codepen to make an online demo to facilitate the answerer

Answer 4

Use flex layout to achieve vertical centering with just a few lines of code. Just search for the tutorial and you’ll find it

Answer 5

1. Table method:

Implementation method: The table content is originally vertically centered and can be processed by simulating the table.

<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
Implementation method: Use empty element placeholder to implement

<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. Absolute positioning

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

4. Use transform to achieve

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

Compatibility: The Android2.3 system browser does not support the direct use of fixed for container positioning, and adding a fixed container can solve the problem.

Conclusion:

Recommended transform implementation

Answer 6

display:-webkit-flex;
justify-content:center;
align-items:center;
width:100px;
height:28px;

Answer 7

Try changing your line-height to 30px

Answer 8

It is more suitable to use line-height and vertical-align together

Answer 9

It is true that the simulator simulates vertical centering, but in actual mobile phones, Apple phones render it vertically centered, and Android phones render it higher. The compatible method is not to set height, line- The height is set to 1, and the padding value is equal to the top and bottom to maintain vertical centering.

Answer 10

Pixel density problem, for example, if your height is 20px, the line height is also 20px. If the pixel density is an even number, there is no problem. If it is an odd number, there will be a problem, so it is generally best to match the height and font size settings, such as The text is 14px, and the height is an even number. The text is 15px, and the height is an odd number