Jak wyśrodkować blok zarówno poziomo, jak i pionowo?

Flexbox:

• Z rodzicem:

  .parent {
    display: flex; // Aktywujemy kontener flex
    justify-content: center; // Centrujemy poziomo
    align-items: center; // Centrujemy pionowo
  }
  

Grid:

• Z rodzicem:

  .parent {
    display: grid; // Aktywujemy kontener grid
    place-items: center; /* Centruje zarówno poziomo, jak i pionowo.
                            Równoważne z:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute i Transform:

.parent {
  position: relative; // Rodzic musi być pozycjonowany
}

.child {
  position: absolute; // Pozycjonowanie absolutne
  top: 50%; // Przesuwa górną krawędź na 50% rodzica
  left: 50%; // Przesuwa lewą krawędź na 50% rodzica
  transform: translate(-50%, -50%); /* Przesuwa element o połowę
                                       jego własnej szerokości i wysokości
                                       dla dokładnego wyśrodkowania */
}

Margin: auto (tylko do poziomego wyśrodkowania inline-block i block):

.element {
  display: block; // Lub inline-block
  width: określona-szerokość; // Szerokość musi być ustawiona
  margin: 0 auto; // Automatyczne marginesy z lewej i prawej
}