Comment centrer un bloc à la fois horizontalement et verticalement?

Flexbox:

• Avec le parent:

  .parent {
    display: flex; // Activation du conteneur flex
    justify-content: center; // Centrage horizontal
    align-items: center; // Centrage vertical
  }
  

Grid:

• Avec le parent:

  .parent {
    display: grid; // Activation du conteneur grid
    place-items: center; /* Centrage horizontal et vertical.
                            Équivalent à:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute et Transform:

.parent {
  position: relative; // Le parent doit être positionné
}

.child {
  position: absolute; // Positionnement absolu
  top: 50%; // Déplace le bord supérieur à 50% du parent
  left: 50%; // Déplace le bord gauche à 50% du parent
  transform: translate(-50%, -50%); /* Déplace l'élément de la moitié
                                       de sa propre largeur et hauteur
                                       pour un centrage précis */
}

Margin: auto (seulement pour le centrage horizontal en inline-block et block):

.element {
  display: block; // Ou inline-block
  width: largeur-définie; // La largeur doit être définie
  margin: 0 auto; // Marges automatiques à gauche et à droite
}