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

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

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

下面是如何使用两个简单的flexbox属性在两个轴上居中n个div:

设置容器的高度:在这里，主体被设置为至少100个视口高度。 对齐项目:中心;如果弯曲方向是行，将垂直中心块，否则水平，如果弯曲方向是列 justify-content:空间;将分配自由空间垂直如果弯曲方向是行或水平如果弯曲方向是列围绕div元素

身体{ 最小高度:100 vh; 显示:flex; 对齐项目:中心; justify-content:空间; ｝ < div > foo < / div > 酒吧< div > < / div >

另一种方法是使用表:

<div style="border:2px solid #8AC007;身高:200 px;宽度:200 px;" > <表风格= "宽度:100%;高度:100%”> < tr风格= "高度:100%”> < td风格= "高度:100%;Text-align:center">你好，这里有多行，这太长了，太棒了，伙计</td> < / tr > 表> < / < / div >

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

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

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

如果你喜欢它没有flexbox，网格，表格或垂直对齐:中间;

你可以:

HTML

<div class="box">
    <h2 class="box__label">square</h2>
</div>

CSS

.box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px solid black;
}

.box__label {
    box-sizing: border-box;
    display: inline-block;
    transform: translateY(50%);
    text-align: center;
    border: 1px solid black;
}

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