Come centrare un blocco sia orizzontalmente che verticalmente?

Flexbox:

• Con il genitore:

  .parent {
    display: flex; // Attiviamo il contenitore flex
    justify-content: center; // Centrare orizzontalmente
    align-items: center; // Centrare verticalmente
  }
  

Grid:

• Con il genitore:

  .parent {
    display: grid; // Attiviamo il contenitore grid
    place-items: center; /* Centra sia orizzontalmente che verticalmente.
                            È equivalente a:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute e Transform:

.parent {
  position: relative; // Il genitore deve essere posizionato
}

.child {
  position: absolute; // Posizionamento assoluto
  top: 50%; // Sposta il bordo superiore al 50% del genitore
  left: 50%; // Sposta il bordo sinistro al 50% del genitore
  transform: translate(-50%, -50%); /* Sposta l'elemento di metà
                                       della sua larghezza e altezza
                                       per un centramento preciso */
}

Margin: auto (solo per centramento orizzontale in inline-block e block):

.element {
  display: block; // O inline-block
  width: larghezza-definita; // La larghezza deve essere impostata
  margin: 0 auto; // Margini automatici a sinistra e a destra
}