css - 移动端页面文字垂直居中兼容性问题
阿神
阿神 2017-04-17 14:29:58
0
11
1259
阿神
阿神

闭关修行中......

reply all(11)
迷茫

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

Peter_Zhu

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.

刘奇

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

刘奇

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

迷茫

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

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

Try changing your line-height to 30px

左手右手慢动作

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

黄舟

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.

左手右手慢动作

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!