Как выровнять по высоте css

Выравнивание элементов по высоте может быть выполнено несколькими способами в зависимости от разметки и требований к макету. Ниже приведены некоторые из них.

1. Использование флексбоксов:

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  height: 100%;
}

Этот код выровняет дочерние элементы внутри родительского, используя свойства display: flex, align-items и justify-content. Свойство height: 100% будет установлено для дочерних элементов, чтобы выровнять по высоте.

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

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  vertical-align: middle;
}

Этот код строит таблицу, используя свойства display: table, display: table-row, display: table-cell. Свойство vertical-align: middle центрирует содержимое ячеек и выравнивает их по высоте.

3. Использование позиционирования:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

Этот код устанавливает свойство position: relative для родительского элемента и position: absolute для дочернего. Свойства top: 0, bottom: 0, margin: auto позиционируют дочерний элемент по верхней и нижней границам родительского и выравнивают его по центру.

Каждый из этих способов может быть применен в зависимости от разметки и требований к макету.