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

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%);
}