Выравнивание по центру в CSS

Сегодня хочется рассмотреть очень важную тему — выравнивание элементов по горизонтали и вертикали.
Изучим текущее положение дел.
Итак, мы видим, что у нас есть блочный элемент, растягивающийся по ширине на всю страницу, а внутри дочерний строковый span. У обоих элементов по-умолчанию position: static, значит они находятся в потоке.

Выравнивание по горизонтали

С выравниванием по горизонтали проблем обычно нет. В данном случае дочерний элемент строковый, значит мы можем выровнять все текстовое содержимое дива  с помощью text-align: center. В том случае, если бы он был строчно-блоковый, можно было бы воспользоваться тем же методом.

А что если бы наш дочерний элемент был бы блочным с заданной шириной? Видим, что на блочное содержимое text-align не действует:

Если мы не зададим ширину, то текст отцентрируется, но лишь потому что элемент займет всю ширину, а нам обычно нужно центрирование самого блока.
В данном случае мы можем прибегнуть к margin: auto. Браузер автоматический определит отступы нашего дочернего элемента со всех сторон. Но посмотрите по вертикали элемент не отцентрировался. Потому что margin-top и margin-bottom приводятся автоматом к 0.

Выравнивание по вертикали

Что же нам делать с вертикальным выравниванием?
Рассматриваем известные. Мы знаем высоту родительского элемента, к тому же дочерний элемент — одна строка. Значит можем задать ей высоту:
line-height: 200px;
Ровно столько сколько высота родительского элемента. Так как текст в span встает по центру строки, мы его так отцентрируем.

Аналогично line-height сработает и для строчного дочернего элемента.
Однако, для нескольких строк такой вариант не сработает.
Для наглядности покрасим наш родительский элемент. И можно вспомнить про position: absolute.
Для начала нужно позиционировать родительский элемент, чтобы отсчитывать отступы дочернего относительно него. Ставим в div position: relative.
Далее позиционируем дочерний абсолютно, задаем отступ сверху 50%. Однако, в данном случае по центру у нас будет вершина дочернего элемента. Ставим margint-top равный половине высоты дочернего элемента. В случае с одной строкой эта высота равна line-height.

Отлично, все работает. Разве что перестал работать margin: auto для выравнивания по горизонтали, так как при абсолютном позиционировании margin рассчитывается только если задано расстояние элемента от родительского позиционированного для данной стороны. Т.е. для того, чтобы работал margin: auto для левой и правой стороны, нам нужно задать left и right.

А теперь давайте забудет про абсолютное позиционирование. И попробуем другие способы. Например, мы может воспользоваться свойством display: table. Правда, как у любой таблицы, ширина родительского элемента теперь рассчитывается по содержимому. Зато нам не требуется знание высоты дочернего элемента, как в случаей с абсолютным позиционированием.

Кстати, если дочерний элемент инлайновый и известна высота родителя, то мы можем использовать vertical-align: middle.

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

Почему это работает? Сначала следует сказать,что строчно-блочные элементы выстраиваются в линию, которая заключена в так называемую box-line. Высота коробки зависит от высоты содержимого. Внутри коробки есть базовая линия, на которой располагается строковое содержимое инлайн элемента. Положение этой линии может меняться в зависимости от значения vertical-align любого инлайн элемента, входящего в box-line.
Мы хотим выровнять относительно родительского элемента, значит нужно назначить дочернему его высоту. Мы не можем нашему дочернему поставить такую высоту, ведь он нам нужен не на весь родительский. Тогда мы используем дополнительный элемент. Он невидим, если мы, проставим для него только высоту. Но он меняет положение базовой линии для всей строки. Поэтому аналогично выравнится и исходный элемент.

Еще, конечно, можно воспользоваться flex:  justify-content устанавливает выравнивание по горизонтали, а align-items по вертикали. Но обратите внимание на поддержку браузерами.

Полезные статьи

Vertical-Align: All You Need To Know
A Complete Guide to Flexbox

Хотите быть в курсе новых статей?