Ako zarovnať blok vodorovne aj zvisle?

Flexbox:

• So staršom:

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

Grid:

• So staršom:

  .parent {
    display: grid; // Aktivirajte grid kontejner
    place-items: center; /* Vodoravno in navpično centriranje.
                            Enako:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute in Transform:

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

.child {
  position: absolute; // Absolutno pozicioniranje
  top: 50%; // Premakne zgornjo rob na 50% starša
  left: 50%; // Premakne levo rob na 50% starša
  transform: translate(-50%, -50%); /* Premakne element za polovico
                                       njegove širine in višine
                                       za natančno centriranje */
}

Margin: auto (samo za vodoravno centriranje inline-block in block):

.element {
  display: block; // Ali inline-block
  width: določena-sirina; // Širina mora biti določena
  margin: 0 auto; // Samodejni robovi levo in desno
}