В чём разница между margin: auto и margin: 0 auto для центрирования?

margin: auto против margin: 0 auto

Оба значения используются для горизонтального центрирования блочных элементов, но работают немного по-разному.

Что делает margin: auto

margin: auto — сокращённая запись, которая устанавливает все четыре отступа (top, right, bottom, left) в auto. Для блочного элемента с заданной шириной браузер равномерно распределяет свободное пространство по горизонтали — элемент центрируется. Но вертикальный margin: auto для обычного потока схлопывается в 0, поэтому вертикального центрирования не происходит.

Что делает margin: 0 auto

margin: 0 auto — сокращение для: top=0, right=auto, bottom=0, left=auto. Явно зануляет вертикальные отступы и распределяет горизонтальные. Результат для центрирования блока идентичен, но семантически точнее: вы явно говорите, что вертикальных отступов нет.

/* Центрирование контейнера */
.container {
  width: 960px;
  max-width: 100%;

  /* Вариант 1: все auto, вертикаль схлопывается в 0 */
  margin: auto;

  /* Вариант 2: явно 0 сверху/снизу, auto по бокам */
  /* margin: 0 auto; */
}

/* Центрирование внутри flex-контейнера */
.flex-parent {
  display: flex;
  height: 200px;
}

.flex-child {
  width: 100px;
  margin: auto; /* центрирует и горизонтально, и вертикально! */
}

Исключение: margin: auto в flex и grid

В flex и grid контейнерах поведение отличается: margin: auto поглощает всё свободное пространство по обеим осям, что позволяет центрировать элемент полностью — как по горизонтали, так и по вертикали.

.flex-container {
  display: flex;
  width: 400px;
  height: 400px;
  background: #f0f0f0;
}

.centered-item {
  width: 100px;
  height: 100px;
  background: #c28b00;
  margin: auto; /* истинное центрирование по обеим осям */
}

/* Трюк: прижать последний flex-элемент к правому краю */
.nav {
  display: flex;
  align-items: center;
}

.nav .logout {
  margin-left: auto; /* толкает элемент вправо */
}

Почему нужна явная ширина

Для блочного элемента в нормальном потоке margin: auto работает только при заданной ширине (или max-width). Без ширины блок растягивается на всю доступную ширину — свободного пространства нет, и auto ничего не делает.

/* Не работает — ширина не задана */
.wrong {
  margin: 0 auto;
  /* Элемент занимает 100% ширины, нечего центрировать */
}

/* Работает */
.correct {
  max-width: 800px;
  margin: 0 auto;
}

Подводные камни

• margin: auto не центрирует инлайновые и инлайн-блочные элементы — только блочные или flex/grid дочерние.
• В нормальном потоке вертикальный margin: auto всегда равен 0, даже если написать margin-top: auto явно.
• При отсутствии width/max-width у блочного элемента margin: 0 auto визуально ничего не сделает.
• Схлопывание вертикальных margin (margin collapsing) влияет на отступы между соседними блоками, но не на auto-значения.
• В абсолютно позиционированных элементах margin: auto работает только при одновременном задании top, bottom, left, right и явных размеров.
• Старые шаблоны с text-align: center на родителе для центрирования блоков — антипаттерн; margin: 0 auto семантически правильнее.

• Смешивать «margin: auto и margin: 0 auto» с похожим механизмом без критерия выбора.
• Игнорировать риск: неверно оценить границы применения темы «margin: auto и margin: 0 auto» и получить хрупкое решение.
• Показывать только синтаксис и не объяснять поведение в runtime или сборке.

• Объясняет автоматические внешние отступы и горизонтальное центрирование блочного элемента.
• Показывает на примере, как работает: margin: 0 auto явно задает вертикальные отступы в ноль и делит свободное горизонтальное пространство между left и right, если у блока есть ограниченная ширина.
• Называет production-нюанс и граничный случай для темы «margin: auto и margin: 0 auto».