迷茫2017-04-17 14:31:58
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
天蓬老师2017-04-17 14:31:58
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.
怪我咯2017-04-17 14:31:58
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
怪我咯2017-04-17 14:31:58
Use flex layout to achieve vertical centering with just a few lines of code. Just search for the tutorial and you’ll find it
迷茫2017-04-17 14:31:58
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
黄舟2017-04-17 14:31:58
display:-webkit-flex;
justify-content:center;
align-items:center;
width:100px;
height:28px;
ringa_lee2017-04-17 14:31:58
It is more suitable to use line-height and vertical-align together
黄舟2017-04-17 14:31:58
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.
ringa_lee2017-04-17 14:31:58
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