IE11 und die Zentrierung per Flexbox

Das Zentrieren von Elemente sowohl horizontal als auch vertikal ist mit der Flexbox theoretisch ganz einfach: margin:auto, und fertig. Der Internet Explorer versteht zumindest in der 11er-Version zwar Flexbox, hat aber diverse Bugs und so kommt er mit diesem in Kapitel 19 von Flexible Boxes beschriebenen Trick nicht klar. Er zieht das zu zentrierende Element einfach in die Länge, was etwas unschön aussieht (siehe Beitragsbild).

Variante 1: Zentrieren per Flexbox mit margin:auto

Zunächst einmal zur einfachen Variante, die der IE11 nicht versteht. Theoretisch ist die horizontale und vertikale Zentrierung per Flexbox nämlich sehr einfach. Eine Überschrift innerhalb von body kann man wie folgt zentrieren:

/* Zentrieren per Flexbox, funktioniert nicht im IE */
body { display: flex; }
h1 { margin: auto }

Man könnte die Höhe von body noch definieren (min-height:100vh), aber in den meisten Browsern funktioniert das gut. Nur im IE nicht. Er versteht margin:auto nicht, egal in welcher Version.

Die Flexbox-Eigenschaften justify-content und align-item

Eine andere Methode zur Zentrierung von Elementen per Flexbox funktioniert mit den auf Seite 485 und 488 vorgestellten Eigenschaften justify-content und align-items. Diese Methode versteht auch der IE, und deshalb möchte ich sie ich in diesem Beitrag kurz vorstellen.

Die beiden Eigenschaften justify-content und align-items ergänzen sich bei der Zentrierung perfekt:

  • justify-content zentriert die Flex-Items auf der Hauptachse und verteilt den Leerraum zu gleichen Teilen am Anfang und am Ende des Containers.
  • align-items zentriert die Flex-Items auf der Nebenachse und verteilt den Leerraum zu gleichen Teilen davor und danach.

Die folgende Abbildung zeigt das am Beispiel einer einfachen Navigation (Flexible Boxes, S. 486 und 488).

Abbildung Zentrierung per Flexbox mit justify-content und align-items mit dem Wert center
justify-content und align-items mit dem Wert center

Wenn man also für den Flex-Container beide Eigenschaften auf center setzt, werden Flex-Items auf Haupt- und Nebenachse zentriert. Works like a charm.

Variante 2: Zentrieren per Flexbox mit justify-content und align-items

Abhilfe schaffen die beiden Eigenschaften justify-content und align-items, die an den Flex-Container vergeben werden und im Buch auf Seite 485 und 488 vorher vorgestellt werden:

/* Zentrieren per Flexbox, funktioniert auch im IE */
body {
display: flex;
justify-content: center;
align-items: center;
}

Das Ergebnis ist für das Beispiel dasselbe wie ein einfaches margin: auto, wird aber auch vom IE verstanden.

Abbildung - Zentrierung per Flexbox funktioniert auch im IE
Zentrierung per Flexbox funktioniert auch im IE

Kollegin Florence Maurice hat in Ihrem Blog einen lesenswerten Beitrag zu diesem Thema geschrieben:

Philip Walton von Google hat auf Flexbugs diverse Browserbugs bei der Umsetzung von Flexbox-Eigenschaften gesammelt.

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Hier im Blog schreibe ich Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.

2 Gedanken zu “IE11 und die Zentrierung per Flexbox

  1. hallo,
    ich habe mit align-items: strech meine itemboxen alle auf die gleiche größe gebracht (weil der inhalt unterschiedlich groß/hoch ist).
    nun soll der inhalt in diesen „gestrechten“ items noch vertical zentriert werden.
    muss ich dafür den inhalt wieder in einen flexcontainer stecken oder gibt es dafür eine eigene anweisung zb item-conten-align: center oder so was?
    danke für einen tip.
    stefan

    • Ohne dein HTML zu kennen ist das nicht so einfach zu beantworten, aber eine spezielle Eigenschaft dafür gibt es nicht.

      Um den Text in den Listenelementen einer ungeordneten Liste vertikal zu zentrieren, verwandelt man auch die Listenelemente li in eine Flexbox und zentriert diese dann mit align-items: center entlang der Nebenachse:

      ul {
        display: flex;
        align-items: stretch; /* Standardwert, kann auch weggelassen werden */ 
      }
      
      li {
        display: flex;
        justify-content: center; /* zentrieren auf der Hauptachse */ 
        align-items: center; /* zentrieren auf der Nebenachse */ 
      }

      Das Ergebnis sieht dann z. B. so aus wie in der folgenden Abbildung:

      Flexible Boxes - Abbildung 19.32

Schreibe einen Kommentar