Question

我有一个相对div位于固定位置div的顶部，我想垂直对齐这个第一个div。有没有办法做到这一点？这是我目前的标记：

<div class="overlay">
    <div id="dialogInvoice">
        content
    </div>
</div>

CSS：

.overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 10;
}

#dialogInvoice {
    width: 390px;
    height: 722px;
    margin: 0 auto;
    padding-top: 28px;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
}

对此有何建议？我确实尝试过行高法，但这显然只在使用纯文本时才有效。

Answer 1

如果您的元素没有固定的宽度或高度，那么您无法使用其他解决方案而不使用javascript来计算值。

这是另一种选择。

#dialogInvoice {
    width: 390px;
    height: 722px;
    padding-top: 28px;
    border-radius: 4px;
    background: #ffffff;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Answer 2

您需要添加到#dialogInvoice的CSS中

top: 50%;

并将保证金更改为

margin: 361px auto;

（361是722/2）

首先将容器推到页面的一半，然后将其向上推回所需的值，这正是其高度的一半（361px）

这是一个jsfiddle，以便更好地理解。

Answer 3

这个CSS可以满足您的需求：

.overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 10;
}

#dialogInvoice {
    margin: 0 auto;
    padding-top: 28px;
    border-radius: 4px;
    background: #ffffff;
    position: absolute;
    top: 100px;
    bottom:100px;
    left:100px;
    right:100px;
}

将div与固定div垂直对齐作为父级？

3 个答案: