Wie zentriert man ein div? Wie macht man das mit position absolute?

Um div mit position: absolute zu zentrieren, muss man:

1. Sicherstellen, dass das Elternteil position: relative (oder eine andere Positionierung außer static) hat.
2. Das Kind-div auf position: absolute setzen.
3. top: 50% und left: 50% setzen — dies verschiebt die obere linke Ecke des Elements in die Mitte des Elternteils.
4. Damit das Element wirklich zentriert ist, verschiebt man es um die Hälfte seiner Breite und Höhe mit transform: translate(-50%, -50%).

Beispiel:

.parent {
  position: relative;
  width: 400px;
  height: 300px;
  background: #eee;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  background: #3498db;
}

<div class="parent">
  <div class="child">Zentrum</div>
</div>