Hogyan lehet egy blokkot vízszintesen és függőlegesen középre helyezni?

Flexbox:

• Szülővel:

  .parent {
    display: flex; // Flex konténer aktiválása
    justify-content: center; // Horizontális középre igazítás
    align-items: center; // Vertikális középre igazítás
  }
  

Grid:

• Szülővel:

  .parent {
    display: grid; // Grid konténer aktiválása
    place-items: center; /* Mind horizontálisan, mind vertikálisan középre.
                            Egyenértékű:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute és Transform:

.parent {
  position: relative; // A szülőnek pozícionáltnak kell lennie
}

.child {
  position: absolute; // Abszolút pozícionálás
  top: 50%; // A felső él 50%-ra mozgatása
  left: 50%; // A bal él 50%-ra mozgatása
  transform: translate(-50%, -50%); /* Az elem eltolása a saját szélességének és magasságának felével
                                       a pontos középre helyezés érdekében */
}

Margin: auto (csak horizontális középre igazítás inline-block és block esetén):

.element {
  display: block; // Vagy inline-block
  width: meghatározott-szélesség; // A szélesség meg kell legyen adva
  margin: 0 auto; // Automatikus margók balra és jobbra
}