Wie kann man ein Block sowohl horizontal als auch vertikal zentrieren?

Flexbox:

• Mit dem Elternelement:

  .parent {
    display: flex; // Aktivieren des Flex-Containers
    justify-content: center; // Horizontal zentrieren
    align-items: center; // Vertikal zentrieren
  }
  

Grid:

• Mit dem Elternelement:

  .parent {
    display: grid; // Aktivieren des Grid-Containers
    place-items: center; /* Zentriert sowohl horizontal als auch vertikal.
                            Entspricht:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute und Transform:

.parent {
  position: relative; // Der Elternteil muss positioniert sein
}

.child {
  position: absolute; // Absolute Positionierung
  top: 50%; // Verschiebt die obere Kante auf 50% des Elternteils
  left: 50%; // Verschiebt die linke Kante auf 50% des Elternteils
  transform: translate(-50%, -50%); /* Verschiebt das Element um die Hälfte
                                       seiner eigenen Breite und Höhe
                                       für eine genaue Zentrierung */
}

Margin: auto (nur für horizontale Zentrierung bei inline-block und block):

.element {
  display: block; // Oder inline-block
  width: bestimmte-breite; // Die Breite muss festgelegt sein
  margin: 0 auto; // Automatische Abstände links und rechts
}