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

Аватар пользователя Olga Pejenkova
Olga Pejenkova
04 июня 2024

Для центрирования элемента по вертикали с помощью CSS существует несколько способов.

Один из самых распространенных способов - использование свойства display: flex; у контейнера элемента и задание свойства align-items: center; это выравнивает элементы по вертикали внутри контейнера. Например:

.container {
  display: flex;
  align-items: center;
}

Другой способ - использование свойства position: absolute; у самого элемента и комбинировать его с свойствами top: 50%; и transform: translateY(-50%);. Например:

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

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

1 0

Похожие вопросы