Как центрировать div? Назови три способа.

Введение

Центрирование элементов — одна из самых частых задач в вёрстке. Существует несколько подходов, каждый из которых имеет свои особенности и области применения. Рассмотрим три основных способа, которые покрывают большинство сценариев.

Способ 1: Flexbox

Flexbox — современный и самый популярный метод. Он прост в использовании и работает для центрирования как по горизонтали, так и по вертикали одновременно.

.parent {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;     /* по вертикали */
}

Этот способ идеален для однострочных и многострочных элементов, а также для адаптивных макетов.

Способ 2: Grid

CSS Grid также отлично справляется с центрированием. Свойство place-items сокращает запись.

.parent {
  display: grid;
  place-items: center; /* центрирует по обеим осям */
}

Grid удобен, когда нужно центрировать элемент внутри сложной сетки, но для простого центрирования он избыточен.

Способ 3: margin: auto

Классический метод для горизонтального центрирования блочных элементов с заданной шириной. Для вертикального центрирования требует дополнительных ухищрений.

.child {
  width: 200px;
  margin: 0 auto; /* горизонтальное центрирование */
}

Если нужно вертикальное центрирование, можно использовать position: absolute с трансформацией:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Вывод

Выбор способа зависит от контекста: flexbox — универсальный и рекомендуемый для большинства случаев, grid — для сеточных раскладок, margin: auto — для простых горизонтальных центрирований. Знание всех трёх методов позволяет гибко решать задачи вёрстки.