← Все вопросы
Как центрировать блок по горизонтали через margin: 0 auto? Почему не всегда срабатывает
6
Прочитал, что блок центрируется через margin: 0 auto. Сделал — а он не двигается, остаётся слева. В чём подвох?
2 ответа
10
✓ Принятый ответ — помог автору
margin: 0 auto работает, но только если у блока задана ширина меньше, чем у родителя. По умолчанию div занимает всю ширину строки — центрировать просто нечего, ему некуда отъезжать.
Исправь так:
.box {
width: 300px; /* обязательно меньше ширины родителя */
margin: 0 auto; /* 0 сверху/снизу, auto слева/справа */
}
auto слева и справа означает «раздели свободное место поровну» — блок и встаёт по центру. Если ширину не задать, фокус не сработает.
4
Ещё причина — этот приём центрирует только по горизонтали и только у блочных элементов. Если нужно и по вертикали, или элемент строчный — проще взять flexbox на родителе. А margin: 0 auto по вертикали (auto сверху/снизу) в обычном потоке не центрирует, имей в виду.
Ваш ответ
Войдите, чтобы ответить на вопрос.