Как центрировать элемент с помощью Flexbox?

Question

Accepted Answer

## Классика

На контейнере: главная и поперечная оси по центру.

```css
.wrap {
  display: flex;
  justify-content: center; /* главная ось */
  align-items: center;     /* поперечная */
  min-height: 100vh;
}
```

Короткая форма для одного измерения часто: `place-content` не из flex; во flex удобнее пара выше. Для центрирования одного ребёнка также `margin: auto` на ребёнке в flex-контейнере.

```css
.wrap { display: flex; min-height: 100vh; }
.box { margin: auto; }
```

## Итог

`justify-content` + `align-items: center` — самый частый ответ. Знайте также `margin: auto` и отличие от grid `place-items`.