Как расположить элементы по вертикали CSS

Есть несколько способов расположить элементы по вертикали с помощью CSS. Рассмотрим некоторые из них:

1. Использование Flexbox

Flexbox позволяет гибко управлять расположением элементов внутри контейнера. Чтобы расположить элементы по вертикали, нужно задать для родительского элемента свойство display: flex и свойство align-items: center.

Пример CSS для расположения элементов по вертикали с помощью Flexbox:

.container {
  display: flex;
  align-items: center; /* расположение элементов по вертикали */
}

2. Использование grid

С помощью CSS Grid можно создавать гибкие сетки, которые автоматически распределяют элементы по вертикали и горизонтали. Чтобы элементы были расположены по вертикали, нужно задать свойство grid-template-columns: auto.

Пример CSS для расположения элементов по вертикали с помощью CSS Grid:

.container {
  display: grid;
  grid-template-columns: auto;
  justify-content: center; /* расположение элементов по горизонтали */
}

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

С помощью таблиц можно легко расположить элементы по вертикали. Чтобы расположить элементы вертикально, нужно задать свойство vertical-align: middle для элементов таблицы.

Пример CSS для расположения элементов по вертикали с помощью таблиц:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  vertical-align: middle; /* расположение элементов по вертикали */
}

Это не все способы расположения элементов по вертикали в CSS, но они являются наиболее популярными и эффективными. Выбор зависит от требований к результату и от поддержки браузерами, которые будут использоваться пользователями.