方法1-
transformtranslateX/translateY：在受支持的浏览器（大多数）中，可以将
top: 50%/left: 50%与组合使用，translateX(-50%) translateY(-50%)以动态垂直/水平居中元素。
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>方法2-Flexbox方法：
In supported browsers, set the
displayof the targeted element toflexand usealign-items: centerfor vertical centering andjustify-content: centerfor horizontal centering. Just don't forget to add vendor prefixes for additional browser support (see example).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>Approach 3 -
table-cell/vertical-align: middle:Example Here / Full Screen Example
In some cases, you will need to ensure that the
html/bodyelement's height is set to100%.For vertical alignment, set the parent element's
width/heightto100%and adddisplay: table. Then for the child element, change thedisplaytotable-celland addvertical-align: middle.For horizontal centering, you could either add
text-align: centerto center the text and any otherinlinechildren elements. Alternatively, you could usemargin: 0 auto, assuming the element isblocklevel.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>Approach 4 - Absolutely positioned
50%from the top with displacement:Example Here / Full Screen Example
This approach assumes that the text has a known height - in this instance,
18px. Just absolutely position the element50%from the top, relative to the parent element. Use a negativemargin-topvalue that is half of the element's known height, in this case --9px.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>Approach 5 - The
line-heightmethod (Least flexible - not suggested):在某些情况下，父元素将具有固定的高度。对于垂直居中，您要做的就是
line-height在子元素上设置一个值，该值等于父元素的固定高度。尽管此解决方案在某些情况下可以使用，但值得注意的是，当有多行文本（例如this）时，该解决方案将无法使用。
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
是的，行得通。我已经习惯了在css3上进行内联弯曲，因此我完全忘记了如何正确地采用这种方法。我真的很感激，非常感谢。
我打开了所有上面的“全屏”示例，我注意到垂直对齐在屏幕底部附近总是有点过分（分辨率1920x1080，标签在屏幕上太低了20个像素）。我在网页中实施了方法2，即使div不是全屏显示，也遇到了同样的问题。我的网页上的问题更严重。（太低100px）...
您可能需要在父级和子级中使用flexbox添加方法6 （在IE9 +中有效，[90％+浏览器市场覆盖率]（caniuse.com/#feat=flexbox））。
display: flexalign-self: center我更改了一些方法2：jsfiddle.net/yeaqrh48/278。结果，通过减小窗口的高度，文本超出了范围，并且变得难以看到。如何解决这个问题呢？
@ josh-crozier刚在他们的css xd中找到一个网站，该网站带有指向您帖子的链接。