Как центрировать div по горизонтали и вертикали?

Question

Accepted Answer

## Начнём с основы
Самый читаемый вариант — Flex или Grid на родителе.

```css
.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* или */
.wrap {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
```

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

- Абсолют + `inset: 0; margin: auto` при известных/неизвестных размерах (с оговорками).
- `transform: translate(-50%, -50%)` + `top/left: 50%` — легаси, хуже для a11y/субпикселей.
- Только горизонталь у блочного: `margin-inline: auto` + ширина.

## На собеседовании

Назовите Flex/Grid как default, absolute — для оверлеев, auto-margin — для простых блоков. Уточните, что «центр экрана» ≠ центр родителя без высоты родителя.

## Итог

Для большинства UI — `flex`/`grid` + выравнивание; остальное — точечные приёмы.