Как сделать вертикальное выравнивание css

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

1. Использование свойства display: flex:

.container {
  display: flex;
  align-items: center; /* выравнивание по центру */
  justify-content: center; /* выравнивание по центру */
  height: 100vh; /* высота контейнера во всю высоту окна браузера */
}

В этом коде классу «container» задаются стили, которые при помощи свойства display: flex; позволяют выровнять элементы внутри контейнера по центру и принять высоту контейнера во всю высоту окна браузера.

2. Использование свойства line-height:

.container {
  height: 100px; /* задать высоту контейнера */
  line-height: 100px; /* задать значение line-height равное высоте контейнера */
  text-align: center; /* выравнивание текста по центру */
}

В этом коде свойство line-height устанавливается равным высоте контейнера, что приводит к вертикальному выравниванию содержимого в центре контейнера.

3. Использование свойства position и transform:

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

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

В этом коде классу «box» задаются свойства position и transform, которые выравнивают элемент по центру контейнера. Это достигается за счет позиционирования элемента абсолютно, указания свойств top и left по 50% и применения сдвига через свойство transform. Для свойства top и left можно использовать проценты или пиксели, в зависимости от контекста.