Florence Maurice

Webthemen

Zentrieren mit Flexbox - verschiedene Möglichkeiten

Geschrieben am:

zentriertes Element

Mit dem CSS-Layoutmodul Flexbox lassen sich Elemente einfach zentrieren.

Allerdings gibt es dafür unterschiedliche Ansätze: Entweder man verwendet zur Zentrierung die Eigenschaften align-items:center und justify-content: center oder aber man setzt dafür auf die altbekannte Eigenschaft margin.

Nehmen wir folgende Ausgangsbasis:

<body> 
<div class="zentriert">Zentriert :-)</div>
</body>

Das Element, das zentriert werden soll, befindet sich innerhalb von body und hat keine festgelegte Höhe oder Breite.

Hinweis: inzwischen habe ich mich noch ein zweites Mal mit dem Thema der Zentrierung per margin und justify-content/align-items befasst.

Zentrieren mit align-items und justify-content

Der erste Ansatz sieht folgendermaßen aus.

Um .zentriert zu zentrieren, machen wir body zum Flexcontainer und sorgen mit align-items: center und justify-content: center für die mittige Anordnung des Flexitems. In der Standardsyntax sieht das folgendermaßen aus:

body { 
display: flex;
align-items: center;
justify-content: center;
}

Bei jsfiddle gibt es das Beispiel zum Austesten - hier auch mit den anderen notwendigen Flexbox-Angaben für Browser, die Vorversionen von Flexbox verstehen: https://jsfiddle.net/fmaurice/8fg3kogm/

Zentrieren über margin

Eleganter, weil kürzer, ist es allerdings, wenn man die Zentrierung über margin beim Flexitem erledigt. margin hat nämlich bei Flexbox eine besondere Rolle: "Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension" (http://www.w3.org/TR/css-flexbox-1/#auto-margins). Das heißt, bevor die Anordnung mit justify-content und align-self stattfindet, wird der freie Platz den Auto-Margins in dieser Richtung zugeschlagen. Damit erreichen wir auch eine Zentrierung über folgende Angaben:

body { 
display: flex;
height: 100vh;
}
.zentriert {
margin: auto;
}

Von dieser kurzen knappen Lösung war ich begeistert ... allerdings spielte der Internet Explorer 11 nicht mit. Hier ist der Inhalt zwar in der Horizontalen zentriert, aber nicht vertikal.

Flexbox: Zentriert über margin funktioniert nicht im IE10/11

(Zuerst hatte ich noch vermutet, es würde an dem bekannten min-height-Problem bei Flexbox im Internet Explorer herrühren, http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/, aber das war nicht der Fall).

https://jsfiddle.net/fmaurice/ak1ge773/

Kombi: Zentrieren mit align-items und margin

Deswegen empfiehlt sich eine Kombination der beiden Ansätze: für die vertikale Zentrierung greift man auf align-items zurück, für die andere auf margin: Und da es in älteren iOS-Safari zu Probleme mit height: 100vh kommt, ist es besser auf height: 100% zu setzen. Das ergibt also:

body { 
display: flex;
height: 100%;
align-items: center;
}
.zentriert {
margin: auto;
}

https://jsfiddle.net/fmaurice/kffv2aao/