Как отцентрировать блок по горизонтали в CSS?
Делаю карточку фиксированной ширины и хочу, чтобы она стояла ровно по центру страницы по горизонтали. Пробовал text-align: center — не работает для самого блока. Как правильно отцентрировать div по горизонтали?
2 ответа
Классический способ для блока с заданной шириной — горизонтальные внешние отступы auto:
.card {
width: 320px;
margin: 0 auto; /* верх/низ 0, слева/справа auto */
}
Браузер делит свободное место поровну между левым и правым margin, и блок встаёт по центру. Обязательное условие: у элемента должна быть ширина меньше родителя и он должен быть блочным (display: block, как у div по умолчанию).
Почему text-align: center не сработал: это свойство центрирует строчное содержимое внутри элемента (текст, картинки, inline-блоки), а не сам блок. Поэтому им можно центрировать содержимое родителя, но не сам div.
Если ширина не задана и не нужна — современный способ через флекс на родителе:
.parent { display: flex; justify-content: center; }
Частая ошибка — забыть ширину: без неё блок занимает 100% и центрировать нечего.
Если блок и так строчно-блочный (display: inline-block), его можно центрировать у родителя через text-align: center:
.parent { text-align: center; }
.child { display: inline-block; }
Удобно, когда ширина ребёнка заранее неизвестна. Но для обычного блочного элемента надёжнее margin: 0 auto с заданной шириной.