Rey's CSS Haxx: Wie man ein Element zentriert

Rey’s CSS Haxx: Wie man ein Element zentriert

Veröffentlicht von Florian - 16. Mai 2019

Zentralisierung ist das A und O. Doch während man bei einer horizontalen Ausrichtung das gute alte margin:0 auto in den Ring wirft, sieht die Sache bei einer vertikalen Ausrichtung schon anders aus. Wie kriegt man also dieses doofe Blockelement komplett mittig zentriert? Der alte Onkel Rey hat die Antwort für euch parat.

1. Das Grundgerüst

Wie so immer benötigen wir zunächst unsere Protagonisten. Das sind in diesem Fall ein Blockelement div und unseren Rahmen body:

<html>
  <body>
    <div class="center">Ich bin die Mitte!</div>
  </body>
</html>

So weit, so standard. Was wir also tun wollen, ist, unseren div in der Mitte des body zu platzieren. Dazu müssen wir den body entsprechend vorbereiten. Und dazu benötigen wir etwas Stil.

2. Das Styling

Zunächst müssen wir unserem Rahmen sagen, dass wir die volle Höhe nutzen wollen. Dies funktioniert allerdings nur, wenn auch das umschließende html die volle Höhe verwendet:

html,
body {
  height:100%;
}
body {
  position:relative;
}

Zusätzlich bekommt unser body noch eine relative Position. Warum, folgt sofort. Denn nun statten wir unseren div Container mit ein wenig Styling aus:

.center {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  width:100px;
  height:100px;
  background:red;
}

Als erstes bekommt das div natürlich eine absolute Position. Denn wo relativ positioniert wird, ist die absolute Positionierung nicht weit. Und ein absolutes Element muss natürlich auch ausgerichtet werden. Daher werden hier alle Richtungen auf 0 gesetzt. Dazu muss gesagt werden, dass auch jeder andere Wert funktioniert, solange er kleiner/gleich 0 ist und für alle vier Richtungen identisch. Denn dadurch heben sich die Richtungsangaben praktisch gegenseitig auf. Dann noch ein gut gezieltes margin:auto dazu – für die automatischen, gleichbleibenden Abstände – und schon ist unser div zentriert. Die restlichen Angaben dienen lediglich der optischen Ansehnlichkeit.

3. Der Wrapper

Natürlich funktioniert das auch, wenn unser div in einen umschließenden div gepackt wird:

<html>
  <body>
    <div class="wrapper">    
      <div class="center">Ich bin die Mitte!</div>
    </div>
  </body>
</html>

Hier würde man die Werte einfach auf den .wrapper anwenden:

.wrapper {
  position:relative;
  width:800px;
  height:800px;
  background:blue;
}

Auch hier kommt wieder die relative Positionierung zum Einsatz. Zusätzlich noch ein paar Größenangaben und ebenfalls ein bisschen optischer Kontrast.

4. Die (bessere?) Alternative

Allerdings ist das nicht die einzige Möglichkeit, um ein ein Element zu zentrieren. Um genau zu sein, hat diese Methode sogar den Nachteil, dass das zentrierte Element keinen margin mehr benutzen kann, da dieser bereits zur Ausrichtung verwendet wird. Um das zu lösen, gibt es aber einen weiteren kleinen aber feinen Trick:

.center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
  width:100px;
  height:100px;
  background:red;
}

Dazu passen wir unser zu zentrierendes Element ein wenig an. Für die absolute Positionierung nutzen wir nun nur die Attribute top und left und geben diesen jeweils einen Wert von 50%. Die restlichen Richtungen entfallen. Und um das verschobene, aber noch nicht ganz mittige Element perfekt in den Mittelpunkt zu rücken, nutzen wir nun die Eigenschaft transform. Und mit transform schieben wir alles nun wieder entlang der X- und Y-Achse um -50% zurück. Bestimmt fragt ihr euch, warum das div dann nicht wieder auf dem Ausgangspunkt landet, da sich die Richtungen ja wieder gegenseitig negieren. Das liegt daran, dass sich top und left immer an den Achsen des umschließenden Elementes ausrichten. Es bestimmt also praktisch den Abstand der Ränder zwischen Parent und Child. Die Werte von transform:translate beziehen sich im Gegensatz dazu auf das Element selbst. Es wird also an seiner eigenen Achse verschoben, statt in Relation zu einem Parent. Schlussendlich wird so das Element .center erst auf die halbe Achse von .wrapper verschoben. Und dann um die Hälfe seiner eigentlichen Achsenlänge wieder zurück. Somit also genau in die Mitte. Und das ist auch schon der ganze Trick dabei. Und nun geht und zentriert mit diesem Wissen die Elemente dieser Welt!