Как с помощью position fixed расположить элемент точно по центру?

Question

[qxie]

Есть модальное окно, мне надо его расположить так, чтобы оно распологалось точно по центру экрана.

Answer 1

[Алексей Скляров]

Создаете блок, в котором будет модальное окно. Задаете ему:

.modal-wrapper {
position:fixed;
display:flex;
align-items:center;
justify-content:center;
top:0px;
left:0px;
width:100vw;
height:100vh;
}

<div class="modal-wrapper">
 <div class="modal">
 </div>
</div>

Саму модалку делаете какой хотите.

Comments

[Иван Доброславин]

Великолепно! Огромное спасибо!

P.S. Как дополнение z-index: 999 или другим большим числом, чтобы поверх всего.

Answer 2

[Dnebl]

Comments

[uRoot]

Хотелось бы дополнить ответ спустя год...

Минус такого подхода в том, что если в сумме элемент (например контейнер попапа) будет иметь непарную высоту (например 701px), то в Chrome текст внутри будет размытым. Нужно будет или уменьшить/увеличить отступ на 1px, или изменить междустрочное расстояние.