Коротко: по горизонтали блок центрируют через margin: 0 auto (блочный элемент с заданной шириной) или через justify-content: center у flex/grid-контейнера. По вертикали — align-items: center у flex/grid. Универсальный «на все случаи» — grid с place-items: center. Разберём 5 способов и когда какой брать.
Сначала определите ось
| Что центрируем | Ось | Рабочий приём |
|---|---|---|
| Блок с шириной (карточка, контейнер) | горизонталь | margin: 0 auto |
| Текст / инлайн-элементы | горизонталь | text-align: center |
| Флекс-элементы в ряд | горизонталь | justify-content: center |
| Флекс-элементы по высоте | вертикаль | align-items: center |
| Что угодно, обе оси | обе | display: grid; place-items: center; |
Вкладки: 5 способов с кодом
.box { width: 600px; max-width: 100%; margin: 0 auto; }Работает только для блочного элемента с ограниченной шириной. Классика для контейнеров и карточек без родителя-флекса.
.parent {
display: flex;
justify-content: center; /* горизонталь */
align-items: center; /* вертикаль */
min-height: 300px;
}Самый предсказуемый способ. Учтите: align-items центрирует по высоте родителя, поэтому родителю нужна высота (например min-height).
.parent {
display: grid;
place-items: center; /* и по X, и по Y */
}Одна строка вместо двух. Если нужно только по горизонтали — justify-items: center, только по вертикали — align-items: center.
.parent { position: relative; }
.child {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}Когда элемент вырван из потока: лоадер поверх контента, бейдж на картинке, кнопка «закрыть» у модалки.
.parent { text-align: center; }
.child { display: inline-block; }Для строки и инлайн-элементов. text-align центрирует не только текст, но и инлайн-блоки внутри строки.
place-items: center. Это две строки, работает в любом современном браузере и центрирует сразу по обеим осям.Практика: три задачи
1. Карточка по центру страницы
- Задайте ширину:
width: 100%иmax-width: 600px. - Добавьте
margin: 0 auto. - Проверьте на узком экране:
max-widthне даст появиться горизонтальной прокрутке.
2. Лоадер ровно по центру блока
.loader-wrap {
display: grid;
place-items: center;
min-height: 200px;
}3. Кнопка по центру в футере
.footer-cta {
display: flex;
justify-content: center;
}Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
margin: 0 auto не работает |
у элемента нет ширины или он inline | задать width/max-width и display: block |
| Не центрируется по вертикали | у родителя нет высоты | добавить min-height |
| Съезжает на пол-пикселя | translate(-50%) и нечётные размеры |
задать чётный размер или translate3d |
| Появился скролл вбок | жёсткая width больше родителя |
использовать max-width: 100% |
Проверьте себя
margin: 0 auto иногда «молчит»?
Вопросы и ответы
Задайте родителю min-height — без высоты «центр» по Y не от чего считать. Либо используйте height: 100vh для полноэкранного блока.
Flex не вырывает элемент из потока: соседи видят его размеры. Absolute нужен только для наложения слоёв — лоадер, бейдж, «закрыть».
Для кнопки достаточно display: inline-flex; align-items: center; justify-content: center; и одинаковых padding.
Да, во всех актуальных браузерах. В очень старых (IE11) — нет; там используют flex или absolute+transform.
Итоги
- Горизонталь блока —
margin: 0 auto, текста —text-align. - Обе оси —
grid+place-items: center. - Наложение поверх контента — absolute +
translate(-50%, -50%). - Помните про высоту родителя при вертикальном центрировании.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.