Позиционируем контейнер по центру в двух измерениях

Разместить блок в центре довольно часто встречающаяся задача. Но, если при позиционировании блока по горизонтали проблем не возникает, то с позиционированием по вертикали всё гораздо сложнее. Тем более если речь идет о центрировании одновременно по горизонтали и вертикали.

Существуют два основных варианта постановки задачи одновременного центрирования по двум измерениям:

• Центрирование относительно экрана браузера;
• Центрирование относительно родительского контейнера.

Центрирование относительно экрана браузера

Как правило, подобный приём используется при создании модальных окон.

Центр окна браузера определяется при помощи свойств top и left, а позиционирование окна точно по центру осуществляется при помощи отрицательных отступов по горизонтали и вертикали. Величина этих отступов составляет соответственно половину ширины и высоты позиционируемого блока.

Чтобы блок при прокрутке страницы оставался на месте ему задаётся свойство position равное fixed.

Ниже приведён фрагмент примера CSS для данного случая/

Центрирование относительно родительского контейнера

Допустим имеется два блока:

Необходимо выровнять дочерний блок (класс child) внутри родительского (класс parent) по горизонтали и вертикали.

Самый простой вариант решения – установить у родительского блока свойство position равное relative, а у дочернего соответственно absolute. После чего применить способ, описанный ранее для центрирования относительно окна браузера.

Ниже приведён пример реализации данного подхода.

Код CSS:

Скриншот браузера:

Таким образом для решения обоих вариантов данной задачи на самом деле можно использовать достаточно несложный общий подход, с корректировкой относительно специфики каждого из них.