Как центрировать блок по горизонтали и по вертикали?

Основные подходы к центрированию

Центрирование элементов — одна из самых частых задач в вёрстке. В зависимости от контекста (текст, блочный элемент, элемент с неизвестными размерами) применяются разные методы. Рассмотрим самые популярные и надёжные из них.

Flexbox — универсальное решение

Flexbox позволяет центрировать элемент по обеим осям всего двумя свойствами. Это работает для любого количества дочерних элементов и не требует знания их размеров.

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

Если нужно центрировать только один элемент, можно использовать margin: auto внутри flex-контейнера.

CSS Grid — современная альтернатива

Grid даёт аналогичный результат с помощью свойства place-items, которое объединяет align-items и justify-items.

.parent {
  display: grid;
  place-items: center;
}

Абсолютное позиционирование

Если родитель имеет заданную высоту, можно использовать position: absolute и transform. Этот метод работает даже для элементов с неизвестными размерами.

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

Горизонтальное центрирование текста и блока

Для текста внутри блока достаточно text-align: center. Для блочного элемента с фиксированной шириной — margin: 0 auto.

.text { text-align: center; }
.block {
  width: 200px;
  margin: 0 auto;
}

Вывод

Для большинства современных проектов выбирайте flexbox или grid — они проще и адаптивны. Абсолютное позиционирование полезно для модальных окон или оверлеев, где нужно точно наложить элемент поверх другого. Знание всех методов помогает быстро решать задачи вёрстки в зависимости от ситуации.