Container mit Flexbox mittig im Viewport positionieren

Webseitengestaltung kann manchmal tricky sein. Ein Div-Element sowohl horizontal als auch vertikal bei jeder Auflösung im Fokus des Viewports zu halten, ist keine leichte Aufgabe. Für die x-Achse gibt es genug Möglichkeiten, aber die y-Achse schaut meist in die Röhre. Mit Gewalt war es dennoch umsetzbar, einem Container auf die Sprünge zu helfen. Beispielsweise die Methode mit CSS-Transform verwendete ich selbst bei meiner alten 404-Fehlerseite. Kürzlich habe ich die Seite neu geschrieben und mir dabei die Frage gestellt, geht das mittlerweile auch anders? Der gewaltsame Weg hat mir nie zu 100% gefallen. Also hab ich mal ein bisschen überlegt.

404-Fehlerseite von re{raise}ace mit Flexbox
404-Fehlerseite von re{raise}ace mit Flexbox

Der Flexbox-Ansatz

Zunächst dachte ich, dass es ein flexibles Box-Modell braucht. Das wäre Ideal, um die größtmögliche Flexibilität zu erhalten. Wunderbar, denn mit Flexbox gibt’s das bereits. Du musst nur etwas umdenken. Chris Coyier hat einen umfangreichen und hilfreichen Guide über Flexbox veröffentlicht. Das CSS-Property unterstützen inzwischen alle aktuellen Webbrowser. Boxen lassen sich damit vertikal und sogar einfach horizontal ausrichten. Das HTML-Gerüst besteht aus zwei Containern.

<div class="container">
  <div class="centered"></div>
</div>

Die äußere Box setzt das Flexbox-Modell um und zentriert das Div-Element darin auf beiden Achsen mittig. Der zweite Container zeigt ein hellblaues Quadrat.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.centered {
  width:200px;
  height:200px;
  background:#006db8;
}


Centering a DIV with flexbox without height

So klappt es allerdings noch nicht. Die blaue Box wird vertikal zwar mittig platziert, aber auf der y-Achse passiert nichts. Warum? Dem ersten Container fehlt eine konkrete Höhenangabe, wie beispielsweise in Pixel. Prozentwerte haben keine Auswirkung. Dadurch wirkt die Ausrichtung jedoch sehr statisch und wenig responsive. Was also tun?

Viewport Units sind die Lösung

Die Lösung ist denkbar simpel. Die Höhe wird einfach anhand der Höhe des Viewports berechnet. Der Browser erkennt, wie hoch der Container ist, und findet dadurch automatisch immer die Mitte. Alle aktuellen Browser verstehen Viewport Units. Der Klasse .container muss nur noch height: 100vh; hinzugefügt werden und schon klappt die Zentrierung der inneren Box auf der y-Achse.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}


Centering a DIV with flexbox and viewport units

Diese Methode ist einfach nur wunderbar. Sie zentriert eine Box auf sehr elegante Weise ohne jegliche Gewalt. Dadurch sind zum Beispiel auch wieder Animationen mit CSS-Transform problemlos nutzbar. Das führte vorher zu einer unschönen Verschiebung des Containers.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare – Schreib mir deine Meinung!

Fülle bitte die nachstehenden Felder aus. Angaben mit einem Sternchen sind Pflichtangaben. Deine E-Mail-Adresse wird nicht veröffentlicht.