Como centrar um bloco tanto horizontalmente quanto verticalmente?

Flexbox:

• Com o elemento pai:

  .parent {
    display: flex; // Ativar o contêiner flex
    justify-content: center; // Centralizar horizontalmente
    align-items: center; // Centralizar verticalmente
  }
  

Grid:

• Com o elemento pai:

  .parent {
    display: grid; // Ativar o contêiner grid
    place-items: center; /* Centraliza tanto na horizontal quanto na vertical.
                            Equivale a:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute e Transform:

.parent {
  position: relative; // O pai deve estar posicionado
}

.child {
  position: absolute; // Posicionamento absoluto
  top: 50%; // Move a borda superior para 50% do pai
  left: 50%; // Move a borda esquerda para 50% do pai
  transform: translate(-50%, -50%); /* Desloca o elemento pela metade
                                       de sua própria largura e altura
                                       para um centramento exato */
}

Margin: auto (apenas para centralizar horizontalmente em inline-block e block):

.element {
  display: block; // Ou inline-block
  width: largura-definida; // A largura deve ser definida
  margin: 0 auto; // Margens automáticas à esquerda e à direita
}