css - 垂直居中一个高度可变的div并显示:none property

Question

我试图将一个 div 置于另一个 div 的中心。 div 具有可变高度，因为它可能包含更短或更长的文本。此外，由于 div 是一个模态窗口，在 css 中它具有属性 display: none 所以我不能使用 display: table-cell (我认为？)。这是两个 div 的属性:

#page {
height: 100vh;}

.white_content {
display: none;
position: absolute;
left: 36%;
width: 28%;
height: auto;
padding: 16px;
background-color: #ffffff;
z-index: 1002;
overflow: auto;}

这是我的 JSFiddle .

Answer 1

如果将 .white_content 更改为垂直居中

Fiddle demo

.white_content {
    display: block;
    position: absolute;
    left: 36%;
    width: 28%;
    height: auto;
    top: 50%;
    padding: 16px;
    background-color: #ffffff;
    z-index: 1002;
    overflow: auto;
    transform: translateY(-50%): 
}