Zentrieren mit Flexbox - verschiedene Möglichkeiten
Geschrieben am:
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.
(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;
}