Центровка HTML с помощью абсолютного позиционирования

Классическая задача о позиционировании контейнера относительно центра родительского блока. Я писал уже о некоторых простых способах установить контейнер по центру, но способов много и все время появляются новые. К примеру, можно использовать table-cell контейнеры или flex.

В данной статье я  расскажу как выполнить центровку с помощью абсолютного позиционирования.

Без центровки

Пусть у нас есть два контейнера — parent и child.

HTML код:

CSS стили задают размеры и цвет контейнеров, пока ничего интересного.

Центровка

Чтобы использовать абсолютное позиционирование для дочернего контейнера, нужно родительскому для начала задать относительное позиционирование, чтобы смещения вычислялись относительно него.

Затем воспользуемся свойствами top или left, заданные в процентах, чтобы указать смещение дочернего контейнера, опираясь на размеры родителя, и transform: translate(), чтобы сдвинуть дочерний контейнер обратно, опираясь уже на размеры child.

Центровка по вертикали:

Добавим стили в шаблон:

Центровка по горизонтали:

Совершенно аналогично центруем блок по горизонтали.

Центруем и по вертикали и по горизонтали:

Если объединить два примера, то получим вот такие стили и шаблон:

«Абсолютная» центровка отлично работает при любых размерах child контейнера, в том числе, если его размеры больше, чем у родительского контейнера. При этом он начинает симметрично выходить за границы:

Написать комментарий

Мало букафф? Читайте есчо !

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-59ec1c5c2afd0007825212/] Ключевым является значение auto для левого и правого отступов. ...

Читать

 

Комментарии к «Центровка HTML с помощью абсолютного позиционирования»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: