垂直居中一个高度可变的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

您正在使用CSS规则

.white_content{
 position:relative
 top:20%
}

使用

top:50%;

working fiddle

Answer 2

如果您将.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%): 
}