JSFiddle example

Question

我遇到的问题是，我不能让我的内部div与类.modal-dialog在其容器中垂直居中，并使用类.modal-container

我已将modal-container设置为table-cell，vertical-align: middle并将其设置为100％的高度，但它不能正常工作。

我想要的只是内部div垂直居中。容器modal-container必须是固定的或绝对定位的，因为它的模态位于页面内容的其余部分之上。

这是代码（CSS然后是HTML）：

.modal-container {
    top: 0;
    left: 0;
    position: fixed;
    width: 270px;
    height: 100%;
    z-index: 2000;
    background-color: #000;
    display: table-cell;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: middle;
}
.modal-dialog {
    width: 210px;
    height: 400px;
    margin: auto;
    border: 1px solid white;
}

<div class="modal-container">
    <div class="modal-dialog">
        <form>
            <input name="EMail" type="email" placeholder="Email address" />
            <input name="Password" type="password" />
        </form>
    </div>
</div>

Answer 1

您可以绝对定位子div并使用top:0; right:0;bottom:0; left:0;将其居中：

.modal-dialog {
    width: 210px;
    height: 400px;
    margin: auto;
    border: 1px solid white;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

<强> jsFiddle example

另请注意，我删除了父级的显示和垂直对齐规则，因为它们不需要。

Answer 2

j08691有一个非常好的答案，但另一种选择是使用transform。

JSFiddle example

<强> CSS

以下是我们要添加的重要部分：

.modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

我们正在使用transform将其高度的50％向上滑动，并将其宽度的50％向左滑动。

Answer 3

另一种解决方案 - 使用margin-top和相对或绝对定位。您将负边距设为高度的一半（因此，以50％高度为中心）。

.modal-dialog {
    width: 210px;
    height: 400px;
    margin: auto;
    border: 1px solid white;
    top: 50%;
    margin-top: -200px;
    position: relative;
}

请注意，只有当您知道高度时（这似乎是您所做的），这才有效。

如何让内部div在包含div内垂直居中？

3 个答案:

JSFiddle example