使用margin：auto来垂直对齐div

Question

所以我知道如果我们使用，我们可以将div水平居中margin:0 auto;。应该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>

Answer 1

你不能使用：vertical-align:middle因为它是不是适用于块级元素margin-top:auto并且margin-bottom:auto因为他们使用的值将计算为零margin-top:-50%因为基于百分比的边距值是相对于包含块的宽度计算的实际上，文档流和元素高度计算算法的性质使得无法使用边距将元素垂直居中于其父元素内。每当垂直边距的值改变时，它将触发父元素高度重新计算（重新流动），这反过来会触发原始元素的重新中心...使其成为无限循环。您可以使用：这样的一些解决方法适用于您的场景; 这三个元素必须嵌套如下：.container {&nbsp; &nbsp; display: table;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; width: 100%;}.helper {&nbsp; &nbsp; #position: absolute;&nbsp; &nbsp; #top: 50%;&nbsp; &nbsp; display: table-cell;&nbsp; &nbsp; vertical-align: middle;}.content {&nbsp; &nbsp; #position: relative;&nbsp; &nbsp; #top: -50%;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; border: 1px solid orange;}<div class="container">&nbsp; &nbsp; <div class="helper">&nbsp; &nbsp; &nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>stuff</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div