Как отцентрировать по вертикали CSS

Чтобы отцентрировать элемент по вертикали в CSS, можно использовать комбинацию свойств display: flex и align-items: center.

Пример:

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

В этом примере мы создаем контейнер div и применяем к нему свойства display: flex и align-items: center. Это позволяет отцентрировать элементы, которые находятся внутри контейнера, по вертикали.

Для отцентрирования контейнера по центру страницы, можно также добавить свойство justify-content: center.

Если нужно отцентрировать только один элемент по вертикали, можно использовать свойство position: absolute. Но в этом случае контейнеру, содержащему элемент, должна быть задана высота.

Пример:

.container {
  position: relative;
  height: 200px; /* задаем высоту контейнеру */
}

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

В этом примере мы создаем контейнер div и задаем ему свойства position: relative и height: 200px. Затем внутри контейнера создаем элемент div и применяем к нему свойство position: absolute. Для отцентрирования элемента по вертикали используем свойство top: 50% и transform: translateY(-50%).