使用 margin:auto 垂直对齐 div

Question

所以我知道如果我们使用 margin:0 auto; ，我们可以水平居中 div 。 margin:auto auto; 应该按照我认为的方式工作吗？也垂直居中？

为什么 vertical-align:middle; 也不起作用？

 .black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}

 <div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

原文由 savinger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2020 年 8 月更新

尽管下面的有用信息仍然值得一读，但我们已经使用 Flexbox 有一段时间了，所以按照 这个答案 使用它。

---

你不能使用：

vertical-align:middle 因为 它 不适 用于块级元素

margin-top:auto 和 margin-bottom:auto 因为 它们使用的值将计算 为零

margin-top:-50% 因为 基于百分比的边距值是相对于包含块的 宽度 计算的

事实上，文档流和 元素高度计算算法 的本质使得不可能使用边距来使元素在其父元素中垂直居中。每当更改垂直边距的值时，它将触发父元素高度重新计算（重新流动），这反过来又会触发原始元素的重新居中……使其成为无限循环。

您可以使用：

像这样的一些解决方法 适用于您的场景；这三个元素必须像这样嵌套：

 .container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}

 <div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

根据 Browsershot， JSFiddle 可以正常工作。

原文由 Oleg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于这个问题是在 2012 年提出的，并且我们在浏览器对 flexboxes 的支持方面取得了长足的进步，我觉得这个答案似乎是必须的。

如果您的父容器的显示是 flex ，那么 是 的， margin: auto auto （也称为 margin: auto 无论是垂直还是垂直居中）它是一个 inline 或 block 元素。

 #parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}

 <div id="parent">
    <div id="child">hello world</div>
</div>

请注意，不必绝对指定宽度/高度，如本 例 jfiddle 中使用相对于视口调整大小。

尽管在发布时浏览器对 flexboxes 的支持处于历史最高水平，但许多浏览器仍然不支持它或需要供应商前缀。有关更新的浏览器支持信息，请参阅 http://caniuse.com/flexbox 。

更新

由于这个答案受到了一些关注，我还想指出，如果您使用的是 display: flex 并且想要居中，则根本不需要指定 margin 容器中的所有元素：

 #parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}

 <div id="parent">
    <div>hello world</div>
</div>

原文由 zpr 发布，翻译遵循 CC BY-SA 4.0 许可协议