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

Сегодня проблема вертикального позиционирования элемента по центру наконец-то изящно решена, благодаря CSS-свойству align-content

Как это было

До появления align-content для вертикального выравнивания элемента по центру приходилось использовать CSS Grid или flexbox.

Пример с CSS Grid:

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Пример с flexbox:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

Для горизонтального выравнивания, как в случае c CSS Grid, так и в случае с flexbox, применялось свойство justify-content. Для строчных элементов проблема решалась с помощью CSS-свойства родительского контейнера text-align: center.

Как это работает теперь

Благодаря свойству align-content: center больше нет необходимости использовать модели CSS Grid или flexbox, у каждой из которых есть свои недостатки. Теперь получить желаемый результат стало гораздо проще и понятнее:

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

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

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

Следует обратить внимание на минимальные версии поддерживаемых броузеров для реализации выравнивания элемента по вертикали с помощью align-content:

1. Chrome 123,
2. Firefox 125,
3. Safari 17.4

Дополнительные материалы

1. MDN
2. Build Your Own: CSS Vertical Center
3. How to center a div in 2024

Спасибо за внимание.