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