A pergunta nº 1 da história do CSS

"Como centralizo uma div?" já foi o terror de todo dev. Com Flexbox, são duas propriedades no container:

• justify-content — alinha na horizontal (o eixo principal)
• align-items — alinha na vertical (o eixo cruzado)

.hero {
  display: flex;
  justify-content: center; /* centro na horizontal */
  align-items: center;     /* centro na vertical */
}

Isso centraliza perfeitamente — nos dois eixos.

Valores úteis de justify-content:

• center — no meio
• space-between — empurra os filhos para as pontas (ótimo para cabeçalhos: logo na esquerda, menu na direita)
• flex-start / flex-end — início / fim

💡 Decore este trio: display: flex + justify-content: center + align-items: center = centralização perfeita. Você vai usar isso a vida inteira.