Jak lze blokovat horizontálně i vertikálně?

Flexbox:

• S rodičem:

  .parent {
    display: flex; // Aktivujeme flex kontejner
    justify-content: center; // Horizontální zarovnání na střed
    align-items: center; // Vertikální zarovnání na střed
  }
  

Grid:

• S rodičem:

  .parent {
    display: grid; // Aktivujeme grid kontejner
    place-items: center; /* Zarovná jak horizontálně, tak vertikálně.
                            Je ekvivalentní:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute a Transform:

.parent {
  position: relative; // Rodič musí být pozicován
}

.child {
  position: absolute; // Absolutní pozicování
  top: 50%; // Posune horní okraj na 50% rodiče
  left: 50%; // Posune levý okraj na 50% rodiče
  transform: translate(-50%, -50%); /* Posune prvek o polovinu
                                       jeho vlastní šířky a výšky
                                       pro přesné centrování */
}

Margin: auto (pouze pro horizontální centrování inline-block a block):

.element {
  display: block; // Nebo inline-block
  width: určená-šířka; // Šířka musí být nastavena
  margin: 0 auto; // Automatické okraje vlevo a vpravo
}