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

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

Способы

Flexbox (современный, гибкий)

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

Когда: выравнивание элементов в ряд/колонку, центрирование — универсальный выбор.

Grid

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

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

text-align (для inline/текста)

.container { text-align: center; } /* текст, inline-элементы */

Когда: выравнивание текста и inline-содержимого.

margin: auto

.block { margin: 0 auto; width: 300px; } /* блок по горизонтали */

Когда: центрирование блочного элемента по горизонтали (нужна ширина).

Absolute + transform

.el {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%); /* точный центр */
}

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

Как выбирать

• Элементы в ряд/колонку, центрирование → Flexbox (дефолт).
• Двумерная сетка → Grid.
• Текст/inline → text-align.
• Блок по горизонтали → margin: auto.
• Абсолютное центрирование → transform.

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

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