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

Блок центрируется во flex-контейнере двумя свойствами: `justify-content` по главной оси и `align-items` по поперечной.

.wrapper {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;     /* по вертикали */
  min-height: 100vh;
}

Другие варианты

• `margin: auto` у ребёнка во flex-контейнере центрирует его по обеим осям:

.wrapper { display: flex; }
.box { margin: auto; }

• `place-items: center` у grid-контейнера делает то же самое одной строкой:

.wrapper { display: grid; place-items: center; }

Частая ошибка

Вертикальное центрирование не работает, если у контейнера нет высоты: align-items центрирует внутри доступного пространства.

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

display: flex; justify-content: center; align-items: center; у родителя (и высота у контейнера), либо margin: auto у ребёнка.

Подробнее: MDN — Выравнивание во flex-контейнере