Kā centrēt bloku gan horizontāli, gan vertikāli?

Flexbox:

• Ar vecāka:

  .parent {
    display: flex; // Aktivizē flex konteineru
    justify-content: center; // Horizontāla centrēšana
    align-items: center; // Vertikāla centrēšana
  }
  

Grid:

• Ar vecāka:

  .parent {
    display: grid; // Aktivizē grid konteineru
    place-items: center; /* Centrē gan horizontāli, gan vertikāli.
                            Vienāds ar:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute un Transform:

.parent {
  position: relative; // Vecākam jābūt pozicionētam
}

.child {
  position: absolute; // Absolūts pozicionējums
  top: 50%; // Pārvieto augšējo malu uz 50% no vecāka
  left: 50%; // Pārvieto kreiso malu uz 50% no vecāka
  transform: translate(-50%, -50%); /* Pārvieto elementu uz pusi
                                       tā platuma un augstuma
                                       precīzai centrēšanai */
}

Margin: auto (tikai horizontālai centrēšanai inline-block un block):

.element {
  display: block; // Vai inline-block
  width: noteikta-platuma; // Platums jānorāda
  margin: 0 auto; // Automātiskie atstarpes pa kreisi un pa labi
}