Центрирование страницы

Код паттерна

  .container {
    margin-inline: max(20px, (100% - 960px) / 2);
  }

Постановка задачи

Нужно центрировать контентный блок так, чтобы:

• на узких экранах у него были стабильные боковые отступы по 20px;
• на широких — блок оставался по центру и не «растягивался» шире 960px;
• решение было декларативным, без медиазапросов и лишних обёрток, корректно работало в LTR/RTL.

Традиционный подход («старый способ»)

Чаще всего делали так:

.container {
  margin: 0 auto; /* центрируем блок */
  max-width: 960px; /* ограничиваем ширину */
}

body {
/* добавляем отступы по бокам
* чтобы контент не прилипал к краям экрана
  */
  padding: 0 20px;
}

Далее в зависимости от конкретной задачи решение могло быть немного видоизменено, например если у блока должен быть фоновый цвет. В этом случае у body обнуляли отступы и переносили их на container.

body {
  padding: 0;
  margin: 0;
}

.container {
  padding: 20px;
  margin: 0 auto;
  max-width: 960px;
}

Современный подход

.container {
  margin-inline: max(20px, (100% - 960px) / 2);
}

Эта запись одновременно создаёт минимальные боковые поля 20px и центрирует контент, когда места больше чем 960px.

Пошаговый разбор выражения

1. margin-inline

   Логическое свойство, задаёт оба боковых внешних отступа: начало и конец строки (вместо margin-left/right). Оно учитывает направление письма (LTR/RTL), поэтому правило универсально.

2. max()

   Функция берёт наибольшее из двух значений. Нам нужно «не меньше, чем 20 px», но если свободного пространства больше — использовать большую величину для центрирования.

• A = 20px — нижняя граница боковых полей на узких экранах.

• B = (100% - 960px) / 2 — половина «лишней» ширины контейнера относительно 960px.

3. Какое итоговое значение будет у max(): (100% - 960px) / 2

   Пусть W — ширина содержащего блока.

   • Если W ≤ 960px, то W - 960px ≤ 0, а значит выражение даёт 0 или отрицательное число → берём max с 20px ⇒ получаем 20px.
   • Если W > 960px, то (W - 960px) / 2 — это ровно тот отступ слева и справа, который центрирует блок шириной 960px.

4. Точка переключения

   Решим, когда оба аргумента равны:

   max(20px, (100% - 960px) / 2) = 20px

   • При W < 1000px → берём 20px.
   • При W ≥ 1000px → берём (W − 960) / 2.

   Почему 1000px? Потому что 960px + (20px * 2) = 1000px.

Итого, поведение полностью описывается одной формулой, без @media.

Примеры использования

Пример №1: Базовый пример

Добавьте в проект класс .container и примените его к блоку, который нужно центрировать.

.container {
  margin-inline: max(20px, (100% - 960px) / 2);
}

<div class="container">
  <p>
    Я очень современный блок. Мне звонили из Баленсиаги, а я не взял трубку, так как выше этого.
  </p>
</div>

Пример №2: С использованием кастомных свойств

Если в проекте используются кастомные свойства, то можно использовать их для центрирования. Статичные значения в этом случае можно пернести на кастомные свойства.

.container {
  --container-width: 960px;
  --gutter: 20px;
  margin-inline: max(var(--gutter), (100% - var(--container-width)) / 2);
}

Поддержка браузерами

Поддержка браузеров:

• Chrome 87+ (из-за margin-inline)
• Firefox 75+ (из-за max())
• Safari 14.1+ (из-за margin-inline)