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

Да, flexbox — самый простой способ. Делаем родителя флекс-контейнером и центрируем по обеим осям:

.center {
  display: flex;
  justify-content: center; /* по горизонтали (главная ось) */
  align-items: center;     /* по вертикали (поперечная ось) */
  height: 100vh;           /* на всю высоту экрана */
}

<div class="center">
  <div class="box">Я в центре</div>
</div>

Ключевой момент: чтобы было видно вертикальное центрирование, у контейнера должна быть высота. Иначе он схлопнется по содержимому и центрировать по вертикали будет негде — отсюда частая жалоба «align-items не работает». 100vh — это вся высота окна браузера.

Ещё короче — через grid:

.center { display: grid; place-items: center; height: 100vh; }

place-items: center сразу центрирует и по вертикали, и по горизонтали. Оба варианта рабочие, выбирайте по вкусу.