Как вертикально центрировать элемент внутри родительского контейнера в CSS?

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

1. Flexbox

Flexbox — это современный метод макета, который облегчает выравнивание элементов. Для вертикальной центровки нужно задать родительскому контейнеру следующие свойства:

.parent {
  display: flex;
  align-items: center; /* Вертикальное выравнивание элемента */
  justify-content: center; /* Горизонтальное выравнивание элемента (опционально) */
  height: 100vh; /* Задаем контейнеру высоту */
}

<div class="parent">
  <div class="child">Я центрирован!</div>
</div>

2. Grid

CSS Grid также является мощным инструментом для создания макетов и выравнивания элементов. Вот пример использования Grid для вертикальной центровки:

.parent {
  display: grid;
  place-items: center; /* Центровка по горизонтали и вертикали */
  height: 100vh;
}

<div class="parent">
  <div class="child">Я центрирован!</div>
</div>

3. Absolute Positioning

Если родительский элемент имеет относительное позиционирование, можно использовать абсолютное позиционирование для центровки:

.parent {
  position: relative; /* Родительский элемент */
  height: 100vh;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Сдвигаем элемент на половину его ширины и высоты */
}

<div class="parent">
  <div class="child">Я центрирован!</div>
</div>

4. Использование таблицы

Этот метод, хоть и не является самым современным, все еще актуален в некоторых случаях и работает во всех браузерах:

.parent {
  display: table;
  width: 100%;
  height: 100vh; /* Установка высоты родителя */
}

.child {
  display: table-cell;
  vertical-align: middle; /* Выравнивание по вертикали */
  text-align: center; /* (опционально) Выравнивание по горизонтали */
}

<div class="parent">
  <div class="child">Я центрирован!</div>
</div>

Заключение

Каждый из предложенных методов имеет свои преимущества и недостатки. Flexbox и Grid рекомендуются для современных проектов, так как они проще в использовании и поддерживают адаптивный дизайн. Подбор метода зависит от структуры вашего HTML и требований к дизайну. Практикуйтесь с каждым из методов, чтобы лучше понять, какой из них наиболее подходит для конкретной задачи.