Как центрировать блок по центру экрана если нет установленной высоты?

Question

[humanIvan]

Подскажите пожалуйста. Мне нужно что бы блок в браузере всегда появлялся по центру экрана. Горизонтально и вертикально. Как это правильно сделать, если высота неизвестна?

Answer 1

[Джавараст Скриптович]

Можно через flex-box:
поместить этот блок в еще один блок, который растянут во весь экран

#родитель{
position:fixed; left:0; top:0;
width:100vw; height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

Comments

[Джавараст Скриптович]

Плюс в UI: легче отловить клик вне этого блока (что бы закрыть, как обычно делают)
Если кому интересно, только
(ловим через addEvenListener, ибо он не поддерживает "всплытие")

Answer 2

[nvdfxx]

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)