Как выровнять блок по вертикали css

Выравнивание блока по вертикали можно выполнить несколькими способами:

1. С помощью свойства display: flex и свойств align-items и justify-content на контейнере:

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

Здесь align-items выравнивает содержимое по вертикали относительно центра контейнера, а justify-content выравнивает содержимое по горизонтали. Свойство display: flex определяет контейнер как flex-контейнер.

2. Также можно использовать свойство position и значения absolute и top, bottom, left и right для позиционирования элемента на странице:

.container {
  position: relative; /* позиционирование элемента */
}

.block {
  position: absolute; /* позиционирование блока */
  top: 50%; /* выравнивание по вертикали */
  transform: translateY(-50%); /* коррекция позиции */
}

Здесь position: absolute определяет, что элемент должен быть позиционирован абсолютно, и top: 50% поднимает его на 50% от верхней грани контейнера. transform: translateY(-50%) корректирует позицию блока, выравнивая его по центру контейнера.

3. Другим способом является установка блоку свойства display: table-cell и свойства vertical-align: middle:

.container {
  display: table; /* задание таблицей */
}

.block {
  display: table-cell; /* задание ячейкой таблицы */
  vertical-align: middle; /* выравнивание по вертикали */
}

Здесь display: table для контейнера и table-cell для блока позволяют задать оба элемента как элементы таблицы. vertical-align: middle выравнивает содержимое блока по центру относительно вертикальной оси таблицы.

В любом случае, выбор метода зависит от конкретной задачи и имеющегося контекста.