Как отцентрировать блочный элемент по горизонтали?

Блочный элемент по горизонтали центрируют через `margin: 0 auto` (с заданной шириной), Flexbox (`justify-content: center`), Grid, или text-align для inline-содержимого.

Способы горизонтального центрирования

margin: 0 auto (классический для блока)

.block {
  width: 300px;      /* обязательна ширина */
  margin: 0 auto;    /* авто-отступы слева/справа → центр */
}

Работает для блочного элемента с заданной шириной.

Flexbox

.container {
  display: flex;
  justify-content: center; /* центр по горизонтали (при row) */
}

justify-content центрирует по главной оси (горизонтали при row).

Grid

.container {
  display: grid;
  justify-items: center; /* или place-items: center */
}

text-align (для inline/inline-block содержимого)

.container { text-align: center; } /* центрирует inline-элементы внутри */

Работает для текста, inline и inline-block, но не для блочных детей.

Как выбирать

• Блок с шириной → margin: 0 auto (простейший).
• Гибкое центрирование, несколько элементов → Flexbox (justify-content: center).
• inline/текст → text-align: center.

Главный нюанс

margin: 0 auto работает только с заданной шириной (иначе блок занимает всю ширину, центрировать нечего).

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

Блочный элемент по горизонтали центрируют: margin: 0 auto (классика, нужна ширина), Flexbox (justify-content: center), Grid (justify-items/place-items). Для inline/текста — text-align: center. margin: 0 auto требует заданной ширины. Универсально — Flexbox.