垂直对齐 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%);
}