方法6

/*Change units to "%", "px" or whatever*/ #wrapper{ width: 50%; height: 70vh; background: rgba(0,0,0,.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #left{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background: red; } #right{ width: 50%; height: 50vh; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: green; } .txt{ text-align: center; line-height: 50vh; } <div id="wrapper"> <div id="left" class="txt">Left</div> <div id="right" class="txt">Right</div> </div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

方法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 >

来源链接

1)显示式伸缩 .child-element { 显示:flex; justify-content:中心; 对齐项目:中心; ｝ 方法2)二维变换 .child-element { 上图:50%; 左:50%; 转换:翻译(-50%，-50%); 位置:绝对的; ｝

在这里查看其他方法

需要遵循以下新的和简单的解决方案: .centered-class { 对齐项目:中心; 显示:flex; justify-content:中心; 宽度:100大众; 身高:100 vh; ｝ < div class = " centered-class”> 我在垂直和水平的中心。 < / div >

我使用这个CSS代码:

display: grid;
justify-content: center;
align-items: center;

来源是CSS-Tricks

如果CSS3是一个选项(或者你有一个备用方案)，你可以使用transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

与上面的第一种方法不同，你不想使用left:50%和负平移，因为在IE9+中有一个溢出的bug。如果使用正的右值，就不会看到水平滚动条。