Как отцентровать блок с помощью Flex

.container {
  display: flex;
  justify-content: center; /* горизонтальное выравнивание */
  align-items: center; /* вертикальное выравнивание */
  height: 100vh; /* высота контейнера (опционально) */
}

Этот код центрирует дочерний элемент по горизонтали и вертикали внутри контейнера. justify-content отвечает за выравнивание по основной оси (горизонталь по умолчанию), align-items - по поперечной оси. Для вертикального центрирования важно указать высоту контейнера.