Zentrieren mit Flexbox – verschiedene Möglichkeiten

Zentrieren mit Flexbox

Mit dem neuen CSS3-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/

Hinweis: in meinem neueren Beitrag habe ich eine andere Lösung für das Problem der Zentrierung per margin bei Flexbox im Internet Explorer gefunden.

Fallback für den Internet Explorer 9

Flexbox kann der Internet Explorer 9 noch nicht. Die vertikale Zentrierung ist oft ein „nice to have“, d.h. man kann oft ganz gut damit leben, wenn sie in einzelnen Browsern nicht funktioniert. Und in der Horizontalen funktioniert die Zentrierung ja dank margin: auto. Im Beispiel gibt es allerdings noch ein weiteres Problem: Das .zentriert-Element hat keine Breitenangaben. Aufgrund von margin bzw. align-items zeigt es allerdings das shrink-to-fit-Verhalten, wird also so schmal, wie es der Inhalt erlaubt. Und genau das findet im Internet Explorer 9 nicht statt, das Element ist bildschirmfüllend breit:

Flexbox: Bildschirmfüllendes Element im IE9

Abhilfe: Man testet über Modernizr, ob Flexbox unterstützt wird, und bestimmt, sofern das nicht der Fall ist, eine passende Breite:

.no-flexbox.no-flexboxlegacy .zentriert {
max-width: 8em;
}

ausprobieren: https://jsfiddle.net/fmaurice/y0pgyfw4/

Vertikal zentriert ist das Element trotzdem nicht, aber häufig kann man damit leben – bei Bedarf kann man aber natürlich an dieser Stelle weitere Angaben zur Zentrierung machen.

3 Kommentare zu “Zentrieren mit Flexbox – verschiedene Möglichkeiten”

  1. Manuel Formanowski (ils)

    Die Flexbox Lösung ist hervorragend !
    Ich habe alle Möglichkeiten an einem Beispiel nach Programmiert, die Flexboxen sind ohnehin klasse, danke dafür ! Sollten in unseren Lehrbüchern auch vorkommen.

    Antworten
    • Penka

      Hallo,Das ganze funktioiert gut.Aber wenn man das Fenster unter die Pixelangaben des divs vekeleinrrt, wird der Inhalt audferhalb des scrollbaren Bereichs nach links oder oben verschoben (wahrscheinlich durch/um den margin in den negativen bereich). Er verschwindet also.Gibt es daffcr eine Lf6sung?

      Antworten
  2. Demme

    Hallo,

    Ich wollte diesen Tipp auch anwenden, habe allerdings mehrere Boxen die nebeneinander angeordnet sind. Jetzt möchte ich immer die mittlere dieser 7 zentriert ausgerichtet haben, kann mir da jemand helfen? Die sind auch zusammengefasst mit

    Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>