Коротко: отцентрировать элемент можно через margin: 0 auto (блок с шириной), text-align: center (текст и инлайн-элементы), flex (justify-content + align-items), grid (place-items: center) или абсолютное позиционирование с transform. Выбор зависит от типа элемента и нужной оси.
Что центрируем
| Тип | Способ |
|---|---|
| Строчный (a, span, img) | text-align: center у родителя |
| Блочный с шириной | margin: 0 auto |
| Любой элемент по обеим осям | grid + place-items: center |
| Элемент поверх блока | absolute + translate(-50%, -50%) |
Вкладки: примеры
.box {
width: 100%;
max-width: 720px;
margin: 0 auto;
}Только для блочных элементов с ограниченной шириной. Если ширина auto — центрировать нечего.
.parent {
display: grid;
place-items: center;
min-height: 320px;
}Центрирует и по горизонтали, и по вертикали. Родителю нужна высота — иначе «центр по вертикали» не от чего считать.
.picture {
display: block;
margin: 0 auto;
max-width: 100%;
}Картинка — строчный элемент, поэтому сначала display: block, затем авто-отступы. Либо просто text-align: center родителю.
.parent { position: relative; }
.center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}Центрирование «поверх» чего-либо: лоадер, надпись на картинке, модальное окно. Не влияет на остальную раскладку.
display: grid; place-items: center; у родителя. Это две строки и работает почти всегда, включая вертикальное центрирование.Практика: три задачи
- Блок текста по центру:
max-width+margin: 0 auto+text-align: center. - Карточка входа по центру экрана:
min-height: 100vh+ grid +place-items: center. - Кнопка по центру секции: flex у секции и
justify-content: center.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Не центрируется | элемент строчный | display: block |
| Не работает margin auto | нет ширины | задать max-width |
| Нет центра по вертикали | нет высоты родителя | min-height |
| Сдвиг на полпикселя | нечётные размеры + translate | выровнять размеры |
Проверьте себя
margin: 0 auto сработал?
Вопросы и ответы
Родителю — display: flex; align-items: center; и высоту (min-height). Либо grid с place-items: center.
Потому что top/left: 50% сдвигает левый верхний угол в центр. translate компенсирует половину размеров самого элемента.
Проверьте отступы (padding/margin) родителя, ширину элемента и box-sizing. Часто мешают margin у body или фикс-ширина больше родителя.
display: inline-flex; align-items: center; justify-content: center; и ровные отступы padding.
Итоги
- Блок —
margin: 0 autoи ширина; текст —text-align. - Обе оси — grid +
place-items: center. - Картинку делают блочной и центрируют авто-отступами.
- Поверх — absolute +
translate(-50%, -50%).
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.