Kako centrirati blok horizontalno i vertikalno?

Flexbox:

• Sa roditeljem:

  .parent {
    display: flex; // Aktivirajte flex kontejner
    justify-content: center; // Horizontalno centriranje
    align-items: center; // Vertikalno centriranje
  }
  

Grid:

• Sa roditeljem:

  .parent {
    display: grid; // Aktivirajte grid kontejner
    place-items: center; /* Horizontalno i vertikalno centriranje.
                            Ekvivalentno:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute i Transform:

.parent {
  position: relative; // Roditelj mora biti pozicioniran
}

.child {
  position: absolute; // Apsolutno pozicioniranje
  top: 50%; // Pomera gornju ivicu na 50% od roditelja
  left: 50%; // Pomera levu ivicu na 50% od roditelja
  transform: translate(-50%, -50%); /* Pomera element za polovinu
                                       njegove širine i visine
                                       za tačno centriranje */
}

Margin: auto (samo za horizontalno centriranje inline-block i block):

.element {
  display: block; // Ili inline-block
  width: određena-širina; // Širina mora biti postavljena
  margin: 0 auto; // Automatski razmaci sa leve i desne strane
}