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

Блочный элемент по вертикали центрируют через Flexbox (`align-items: center`), Grid (`place-items` / `align-items`), или absolute + `transform: translateY(-50%)`.

Способы вертикального центрирования

Flexbox (рекомендуется)

.container {
  display: flex;
  align-items: center;   /* центр по вертикали (при row) */
  min-height: 100vh;      /* нужна высота контейнера */
}

align-items центрирует по поперечной оси (вертикали при flex-direction: row).

Grid

.container {
  display: grid;
  align-items: center;    /* по вертикали */
  /* или place-items: center; — по обеим осям */
}

Absolute + transform

.el {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* сдвиг на половину своей высоты */
}

Когда высота элемента неизвестна.

margin: auto во Flex

.container { display: flex; }
.el { margin: auto 0; } /* центр по вертикали */

Главное

Для вертикального центрирования контейнер должен иметь высоту (height/min-height), иначе центрировать не в чем.

Как выбирать

• Универсально → Flexbox (align-items: center).
• По обеим осям → Grid (place-items: center).
• Неизвестная высота элемента, оверлей → absolute + translateY.

Коротко для собеседования

Блочный элемент по вертикали центрируют: Flexbox (display: flex; align-items: center, контейнеру нужна высота), Grid (align-items: center или place-items: center), absolute + transform: translateY(-50%) (при неизвестной высоте). У контейнера должна быть высота. Универсальный выбор — Flexbox.