Kuidas saab blokki horisontaalselt ja vertikaalselt tsentreerida?

Flexbox:

• Vanemaga:

  .parent {
    display: flex; // Aktiveerib flex konteineri
    justify-content: center; // Horisontaalne keskendumine
    align-items: center; // Vertikaalne keskendumine
  }
  

Grid:

• Vanemaga:

  .parent {
    display: grid; // Aktiveerib grid konteineri
    place-items: center; /* Mõlemal horisontaalselt ja vertikaalselt.
                            Võrdne:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute ja Transform:

.parent {
  position: relative; // Vanem peab olema positsioneeritud
}

.child {
  position: absolute; // Absoluutne positsioneerimine
  top: 50%; // Liigutab ülemise ääre 50%-le
  left: 50%; // Liigutab vasakpoolse ääre 50%-le
  transform: translate(-50%, -50%); /* Liigutab elementi poole
                                       selle laiusest ja kõrgusest
                                       täpseks keskpunktiks */
}

Margin: auto (ainult horisontaalne keskendumine inline-block ja block):

.element {
  display: block; // Või inline-block
  width: määratletud-laius; // Laius peab olema määratud
  margin: 0 auto; // Automaatne vasak ja parem marginaal
}