方法1 -转换translateX/translateY:
这里/全屏示例
在受支持的浏览器中(大多数)，您可以使用top: 50%/left: 50%结合translateX(-50%) translateY(-50%)动态地将元素垂直/水平居中。
.container {
位置:绝对的;
上图:50%;
左:50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
translateX(-50%) translateY(-50%);
｝
< div class = "容器" >
我在垂直/水平居中!< / span >
< / div >
方法2 - Flexbox方法:
这里/全屏示例
在受支持的浏览器中，将目标元素的显示设置为flex，并使用align-items: center用于垂直居中，使用justify-content: center用于水平居中。不要忘记为额外的浏览器支持添加供应商前缀(参见示例)。记住，父容器也需要高度(在本例中为100%)。
Html, body， .container {
高度:100%;
｝
.container {
显示:-webkit-flexbox;
显示:-ms-flexbox;
显示:-webkit-flex;
显示:flex;
-webkit-flex-align:中心;
-ms-flex-align:中心;
-webkit-align-items:中心;
对齐项目:中心;
justify-content:中心;
｝
< div class = "容器" >
我在垂直/水平居中!< / span >
< / div >
方法3 - table-cell/vertical-align:中间:
这里/全屏示例
在某些情况下，您需要确保html/body元素的高度设置为100%。
对于垂直对齐，设置父元素的宽度/高度为100%，并添加display: table。然后对于子元素，将显示更改为table-cell并添加vertical-align: middle。
对于水平居中，您可以添加text-align: center使文本和任何其他内联子元素居中。或者，您可以使用margin: 0 auto，假设元素是块级别的。
Html, body {
高度:100%;
｝
.parent {
宽度:100%;
高度:100%;
显示:表;
text-align:中心;
｝
.parent > .child {
显示:表格单元;
vertical-align:中间;
｝
<类节=“父”>
<div class="child">我是垂直/水平居中!< / div >
< / >节
方法4 -绝对定位50%从顶部位移:
这里/全屏示例
这种方法假定文本具有已知的高度——在本例中为18px。只需要将元素定位在距离顶部50%的位置，相对于父元素。使用一个负的margin-top值，即元素已知高度的一半，在本例中为- -9px。
Html, body， .container {
高度:100%;
｝
.container {
位置:相对;
text-align:中心;
｝
.container > p {
位置:绝对的;
上图:50%;
左:0;
右:0;
margin-top: 9 px;
｝
< div class = "容器" >
<p>我是垂直/水平居中!< / p >
< / div >
方法5 -行高法(最不灵活-不建议):
例子
在某些情况下，父元素将具有固定的高度。对于垂直居中，您所要做的就是在子元素上设置一个行高值，该值等于父元素的固定高度。
虽然这种解决方案在某些情况下是有效的，但值得注意的是，当有多行文本时，它就不起作用了——就像这样。
.parent {
身高:200 px;
宽度:400 px;
背景:浅灰色;
text-align:中心;
｝
.parent > .child {
行高:200 px;
｝
< div class = "父" >
<span class="child">我在垂直/水平居中!< / span >
< / div >
