Вертикальное выравнивание div. Элементарно

Насущная проблема в вёрстке — это выравнивание элементов. Если с горизонталью всё понятно и имея под рукой пару фич можно выровнять любой элемент, то как быть с вертикалью?

margin: auto

Это не работает. Свойство margin: auto выравнивает элемент только по горизонтали. И не забудьте, что есть два важных условия для работы этой фишки: элемент должен быть блочным и иметь фиксированную ширину, только так.

See the Pen margin: auto by AsheGentle (@ashegentle) on CodePen.29275

line-height

Если у вас строка, только одна строка (что важно), и вам всё ещё требуется выровнять её по центру, задайте ей line-height, равный высоте родителя. Да, высоту родителя тоже придётся жёстко зафиксировать. И при появлении второй строки эффект пропадёт.

See the Pen line-height by AsheGentle (@ashegentle) on CodePen.29275

vertical-align

А вот теперь действующий и самый интересный способ. Есть не зря придуманное свойство vertical-align: middle. Но одного его не достаточно, я не шучу =) Разберёмся по порядку.

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

Во-вторых, vertical-align прекрасно справится со строчными и строчно-блочными элементами. При этом выравнивать оно будет сам элемент относительно окружающих. Отсюда простой вывод: никаких проблем, если у вас два элемента или больше. Задав им обоим vertical-align: middle вы получите аккуратные элементы, выровненные по высоте относительно друг друга.

А если не два? Тогда вспомним про псевдоэлементы! В визуальном представлении они располагаются внутри вызвавшего их элемента. А значит, внутри родителя уже как минимум два элемента есть. Делаем их inline или inline-block, ещё немного магии и выравниваем по центру.

Задача решена? Ну почти. Остаются маленькие нюансы: те, что преследуют идущие друг за другом строчные элементы. Даже принудительно задав псевдоэлементу ширину в 0px, вы всё равно обнаружите неприятное расстояние. Я говорю о пробелах между элементами. Тут вы можете использовать любой работающий способ, будь то вытягивание в строку, комментарии или font-size: 0.

See the Pen vertical-align by AsheGentle (@ashegentle) on CodePen.29275

flex

Этот абзац я дописала уже в 2018 году.

Простой и безопасный способ сейчас — это использование флексов. Они позволяют выравнивать элементы по осям не зависимо ни от чего. Главное помнить про поддержку и использовать префиксы.

Выбираем ось, выравниваем. Проще некуда.

See the Pen vertical-align-flex by AsheGentle (@ashegentle) on CodePen.29275

Готово.