Центр вертикально div с переменной высотой и отображением: none property

Question

Я пытаюсь центрировать div внутри другого. Div имеет переменную высоту, потому что может содержать более короткий или более длинный текст. Кроме того, поскольку div является модальным окном, в css он имеет отображение свойств: none, поэтому я не могу использовать display: table-cell (я думаю?). Вот собственность два дивы:

#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%): 
} 

Answer 2

вы используете правило CSS

.white_content{ 
position:relative 
top:20% 
} 

использование

top:50%; 

working fiddle