Как с помощью флекс верстки поставить объект по центру

Краткий ответ:

.container {
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;     /* по вертикали */
  min-height: 100vh;       /* высота контейнера — весь экран */
}

Как это работает

<div class="container">
  <div class="item">Объект</div>
</div>

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

1. display: flex включает флекс-раскладку у родительского элемента.
2. justify-content: center выравнивает объект по главной оси — обычно горизонтально.
3. align-items: center выравнивает объект по поперечной оси — обычно вертикально.
4. min-height: 100vh задаёт контейнеру высоту окна браузера, поэтому вертикальное центрирование становится заметным.

Если нужно центрировать только по горизонтали:

.container {
  display: flex;
  justify-content: center;
}

Если задано flex-direction: column, направления осей меняются местами.