使用margin：auto垂直对齐div

小编典典

使用margin：auto垂直对齐div

html

所以我知道如果使用，我们可以将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>

阅读 294

2020-05-10

共1个答案

小编典典

您不能使用：

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可以正常工作。

2020-05-10