Как разместить блок по центру окна браузера

Опубликовано 13 Мая 2016 в CSS

Появилась срочная необходимость красиво и безболезненно разместить по центру блок? Часто, при разработке сайта, вы сталкиваетесь с необходимостью выводить popup-окна разного содержания. Это могут быть как контактные формы, так и обычные информационные блоки. С эстетической стороны их расположение должно быть определено по центру окна и никак иначе, ведь внимание пользователя направлено именно туда.

На одном из наших недавних проектов вот именно такое и надо было реализовать - обычное popup-окно. Строго центр и ни шага влево. Сайт уже обладал некоторой силой вызова popup-окон, однако их местоположение относительно окна не удовлетворяло желанием заказчика.

Мы принялись искать причину, виновника, того, кто будет наказан, изменен и оптимизирован. Буквально прошло минут 10 как мы находим вот это:

var DH = $(document).height(), WH = $(window).height(), ST = $(window).scrollTop(),
PH = ("#elementPopUp").outerHeight();
if (WH < PH) { if (ST + WH > DH - 10) {
('.feedbackWrap').css({bottom: '10px', top: ''});
} else {
$('.feedbackWrap').css('top', 50 + ST);
} }
else { $('.feedbackWrap').css('top', 50 + ST);
} }

“Что это? Кто ты? Где CSS?” - спросили мы у Всевышнего. Тишина. Начали разбираться что это за зверь и с чем его едят.

В результате было выяснено, что этот js-скрипт вычисляет сколько надо отступить popup-окну с положением absolute от верхнего края окна, чтобы расположится по центру.

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

Вот простое решение, которое поможет Вам разместить блок по центру окна браузера:

.fixInCenter
{
 display: block;
 position: fixed;
 margin: 0 auto;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: red;
 width: 50px;
 height: 50px;
}

Для тех, у кого нет времени читать - можете посмотреть видео на нашем канале YouTube