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

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

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

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

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

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

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

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

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

.browser-center{
    height: 300px;
    left:50%;
    margin-left: -200px;
    margin-top:-150px;
    position: fixed;
    top:50%;
    width: 400px;
}

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

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

<div class="parent">
    <div class="child"></div>
</div>

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

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

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

Код CSS:

.child{
    background-color: gold;
    left:50%;
    height: 100px;
    margin-left: -100px;
    margin-top: -50px;
    position: absolute;
    top:50%;
    width: 200px;
}
.parent{
    background-color: aquamarine;
    height: 300px;
    position: relative;
    width: 400px;
}

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