Как отцентрировать блочный элемент по вертикали

Есть несколько способов центрирования блочного элемента по вертикали:

1. Flexbox (самый простой и современный способ):

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

2. Grid:

.parent {
  display: grid;
  align-items: center;
}

3. Позиционирование (если известна высота):

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4. Табличный метод (устаревший, но работает):

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

Flexbox - наиболее предпочтительный вариант в современных проектах. Grid хорошо подходит для сложных раскладок. Остальные методы стоит использовать только для поддержки старых браузеров.