Позиционирование изображения по вертикали CSS

Question

У меня есть функция для отображения изображений. Он открывает скрытый div, содержащий изображение и div с черным наложением.

.black-overlay { 
 
    opacity: 0.8; 
 
    background: #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 10; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
} 
 
.white-content { 
 
    z-index: 11; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding-top: 5%; 
 
} 
 
.white-content .main-image { 
 
    z-index: 11; 
 
    border: 2px solid #ccc; 
 
    border-radius: 10px; 
 
    background: #FFF; 
 
    max-width: 90%; 
 
    max-height: 90%; 
 
    position: relative; 
 
}

<div class="black-overlay hide"></div> 
 
<div class="white-content hide"> 
 
    <img class="main-image" src="//dummyimage.com/200" /> 
 
</div>

Горизонтально изображение выравнивается по центру, который является тем, что я хочу.

Проблема в том, что вертикально изображение всегда придерживается вершины, и я не могу понять, как его исправить.

Может кто-то помочь мне решить эту проблему (я могу добавить дополнительные дивы, если это необходимо)

Answer 1

Использование дисплея: сгибать для центрирования:

.white-content{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.white-content .main-image{ 
    display: block; 
} 

Это центр изображения по горизонтали и по вертикали. Не забудьте добавить префиксы для старых браузеров.