CSS-центрирование в 2026 году 🎯
Современные способы центрирования в CSS: Flexbox, Grid, text-box, якорное позиционирование и безопасное выравнивание.
Центрирование элементов в CSS — это уже классическая шутка в мире фронтенда. Кажется, сколько бы новых свойств ни завозили, каждый год обязательно выходит ультимативный гайд, собирающий все подходы в одном месте.
В блоге CSS-Tricks вышел свежий и очень детальный разбор от Темани Афифа. Автор раскладывает по полочкам современную теорию выравнивания и наглядно показывает, что и в каких ситуациях использовать.
Главное из статьи:
- Базовая теория: концепция двух уровней выравнивания (контейнер vs элементы) и двух осей. Помогает раз и навсегда понять ментальную модель CSS.
- Флексы, гриды или абсолют? Сравнение «лоб в лоб» для разных сценариев. Спойлер:
place-content: centerилиmargin: autoво флексах решают 90% задач, но везде есть свои подводные камни. - Новое свойство
text-box(бывшееtext-box-trim): идеальный способ избавиться от нативных невидимых отступов вокруг текста, которые вечно ломают идеальное вертикальное центрирование «по пикселям». - Якорное позиционирование и
anchor-center: нативный способ центрировать всплывашки, тултипы и менюшки относительно элемента-донора без единой строчки на JavaScript. - Безопасное и небезопасное центрирование: разница между
align-content: centerиalign-content: safe center. Обязательно к изучению, чтобы контент внутри мелких контейнеров на мобилках переносился или скроллился, а не тупо обрезался за краями экрана.
Если хотите освежить базу и посмотреть, как современные спецификации превращают старые костыли в изящный код, статья обязательна к прочтению.