Коротко: поставить блок по центру можно тремя способами: задать блоку max-width и margin: 0 auto (это центрирует «колонку контента»), центрировать через flex/grid у родителя (для любых блоков, включая фиксированной ширины) или использовать absolute + translate для наложения. Для «контейнера страницы» чаще всего нужен первый вариант.
Что центрируем
| Блок | Способ |
|---|---|
| Колонка контента (контейнер) | max-width + margin: 0 auto |
| Карточка в секции | flex/grid у секции |
| Блок фиксированной ширины | flex + justify-content: center |
| Модальное окно | absolute/fixed + translate |
Вкладки: примеры
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}Классический «контейнер сайта». Блок занимает всю доступную ширину, но не больше заданной, и центрируется авто-отступами. Padding не даёт контенту «прилипать» к краям на мобильных.
.section {
display: flex;
justify-content: center;
}
.card { width: 480px; max-width: 100%; }Секция центрирует карточку по горизонтали. Если карточке задать margin: 0 auto, а секцию сделать flex — тоже сработает, но для нескольких элементов flex удобнее.
.section {
display: grid;
justify-items: center; /* выравнивание содержимого по X */
}justify-items: center центрирует дочерние блоки в ячейках. Если нужно и по вертикали — place-items: center плюс высота.
.overlay { position: fixed; inset: 0; }
.modal {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
}Центрирование «поверх» страницы. max-width в единицах окна не даёт модалке выйти за экран на телефоне.
max-width, а не через фиксированную width. Тогда на узких экранах блок сжимается, и не появляется горизонтальная прокрутка.Практика: контейнер, который не ломается
- Задайте
width: 100%иmax-width— блок тянется, но не раздувается. - Добавьте
margin: 0 autoдля центрирования. - Добавьте горизонтальные
paddingдля «воздуха» на мобильных. - Включите
box-sizing: border-box, чтобы padding не ломал ширину. - Проверьте на экране 320px — нет ли прокрутки.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
margin: 0 auto не работает |
элемент строчный | display: block |
| Блок «сдвинут» влево | нет max-width |
задать ширину |
| Появилась прокрутка | padding без border-box |
включить border-box |
| Модалка вылезает на телефоне | фикс-ширина | max-width: 90vw |
Проверьте себя
margin: 0 auto?
Вопросы и ответы
Обычно 1200–1280px: комфортно для чтения и привычно для макетов. Для текстовых колонок — 700–800px.
Родителю — flex с align-items: center и высота, либо grid с place-items: center.
Да, это удобно: каждая секция «заворачивает» содержимое в общий контейнер и заодно задаёт ему фон и отступы на всю ширину.
Сделайте «full-bleed»: секцию — во всю ширину окна, а контент внутри — в центрированном контейнер. Иначе текст будет растянут на 27-дюймовом мониторе.
Итоги
- Контейнер центрируют
max-width+margin: 0 auto. - Другие блоки — flex или grid у родителя.
- Модалку — absolute +
translate(-50%, -50%). - Ширину задавайте через
max-width, а padding — сborder-box.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.