Сравни способы централизации элементов и объясни, когда выбирать каждый вариант.

Способы централизации (центрирования) элементов: Flexbox (`center`), Grid (`place-items: center`), absolute + transform, `margin: auto`. Выбор — по контексту (один элемент, блок, оверлей).

Способы центрирования

Flexbox (универсальный)

.container {
  display: flex;
  justify-content: center; /* горизонталь */
  align-items: center;      /* вертикаль */
}

• Когда: центрирование по обеим осям — дефолтный выбор.

Grid (кратчайший)

.container {
  display: grid;
  place-items: center; /* центр по обеим осям одной строкой */
}

• Когда: центрирование одного элемента, двумерные раскладки.

margin: auto (блок по горизонтали)

.block { margin: 0 auto; width: 300px; }

• Когда: блочный элемент с шириной по горизонтали.

Flex + margin: auto (по обеим)

.container { display: flex; }
.item { margin: auto; } /* центр по обеим осям */

Absolute + transform

.el {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

• Когда: центрирование поверх (модалки, оверлеи), когда размеры неизвестны.

Как выбирать

• Один/несколько элементов по центру → Flexbox (дефолт).
• Кратко центрировать → Grid `place-items: center`.
• Блок по горизонтали → margin: auto.
• Оверлей/модалка → absolute + transform.

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

Центрирование: Flexbox (justify-content: center + align-items: center — универсальный дефолт), Grid (place-items: center — кратчайший), margin: auto (блок по горизонтали с шириной), absolute + translate(-50%,-50%) (оверлеи, неизвестные размеры). Выбор: обычно Flexbox, для оверлеев — absolute + transform.