Flexbox: horizontal und vertikal zentrieren

Question

Wie man ein div horizontal und vertikal innerhalb des Containers zentriert, mit flexbox. Im unten stehenden Beispiel möchte ich, dass jede Zahl untereinander (in Reihen) zentriert ist.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

    1

    2

    3

    4

http://codepen.io/anon/pen/zLxBo

Answer 1

Ich denke, du möchtest etwas Ähnliches wie das Folgende.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

        1
        2
        3
        4

Siehe Demo unter: http://jsfiddle.net/audetwebdesign/tFscL/

Deine .flex-item Elemente sollten block-level sein (div statt span), wenn du möchtest, dass die Höhe und die oberen/unteren Ränder korrekt funktionieren.

Außerdem, setze bei .row die Breite auf auto anstelle von 100%.

Deine .flex-container Eigenschaften sind in Ordnung.

Wenn du möchtest, dass das .row vertikal in der Ansicht zentriert ist, weise html und body eine Höhe von 100% zu und setze auch die Ränder von body auf null.

Beachte, dass .flex-container eine Höhe benötigt, um den vertikalen Ausrichtungseffekt zu zeigen, ansonsten berechnet der Container die minimale Höhe, die benötigt wird, um den Inhalt zu umschließen, was in diesem Beispiel geringer ist als die Höhe der Ansichtsfläche.

Fußnote:
Die Eigenschaften flex-flow, flex-direction, flex-wrap hätten dieses Design einfacher umzusetzen gemacht. Ich denke, dass der .row Container nicht benötigt wird, es sei denn, du möchtest einige Stilelemente um die Elemente herum hinzufügen (Hintergrundbild, Rahmen usw.).

Eine nützliche Ressource ist: http://demo.agektmr.com/flexbox/

Answer 2

Wie man Elemente in Flexbox vertikal und horizontal zentriert

Unten sind zwei allgemeine Zentrierungslösungen aufgeführt.

Einmal für vertikal ausgerichtete Flex-Elemente (flex-direction: column) und einmal für horizontal ausgerichtete Flex-Elemente (flex-direction: row).

In beiden Fällen kann die Höhe der zentrierten Divs variabel, undefiniert, unbekannt, egal sein. Die Höhe der zentrierten Divs spielt keine Rolle.

Hier ist der HTML-Code für beides:

        DIV #1

        DIV #2

---

CSS (ohne dekorative Styles)

Wenn Flex-Elemente vertikal gestapelt sind:

#container {
    display: flex;           /* Flex-Container erstellen */
    flex-direction: column;  /* Hauptachse vertikal machen */
    justify-content: center; /* Elemente vertikal zentrieren, in diesem Fall */
    align-items: center;     /* Elemente horizontal zentrieren, in diesem Fall */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* Text in 

DEMO

---

Wenn Flex-Elemente horizontal gestapelt sind:

Die Regel flex-direction aus dem obigen Code anpassen.

#container {
    display: flex;
    flex-direction: row;     /* Hauptachse horizontal machen (Standardeinstellung) */
    justify-content: center; /* Elemente horizontal zentrieren, in diesem Fall */
    align-items: center;     /* Elemente vertikal zentrieren, in diesem Fall */
    height: 300px;
}

DEMO

---

Zentrieren des Inhalts der Flex-Elemente

Der Bereich eines Flex-Formatierungskontextes ist auf eine Eltern-Kind-Beziehung begrenzt. Nachkommen eines Flex-Containers jenseits der Kinder nehmen nicht am Flex-Layout teil und ignorieren Flex-Eigenschaften. Grundsätzlich sind Flex-Eigenschaften über die Kinder hinaus nicht vererbbar.

Deshalb müssen Sie immer display: flex oder display: inline-flex auf ein Elternelement anwenden, um Flex-Eigenschaften auf das Kind anzuwenden.

Um Text oder anderen Inhalt, der sich in einem Flex-Element befindet, vertikal und/oder horizontal zu zentrieren, machen Sie das Element zu einem (verschachtelten) Flex-Container und wiederholen Sie die Zentrierungsregeln.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* für einzeiligen Flex-Container */
    align-content: center;      /* für mehrzeiligen Flex-Container */
}

Weitere Details hier: Wie man Text in einem Flexbox vertikal ausrichtet?

Alternativ können Sie margin: auto auf das Inhaltslement des Flex-Elements anwenden.

p { margin: auto; }

Erfahren Sie mehr über Flex-auto-Margen hier: Methoden zum Ausrichten von Flex-Elementen (siehe Box#56).

---

Zentrieren mehrerer Zeilen von Flex-Elementen

Wenn ein Flex-Container mehrere Zeilen hat (aufgrund von Zeilenumbrüchen) wird die Eigenschaft align-content für die Ausrichtung der Querachse erforderlich sein.

Aus der Spezifikation:

8.4. Packen von Flex-Linien: die align-content Eigenschaft

Die Eigenschaft align-content richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn im Querachse zusätzlicher Platz vorhanden ist, ähnlich wie bei justify-content einzelne Elemente in der Hauptachse ausrichtet. Anmerkung: Diese Eigenschaft hat keinen Einfluss auf einen einzeiligen Flex-Container.

Weitere Details hier: Wie funktionieren flex-wrap mit align-self, align-items und align-content?

---

Browser-Unterstützung

Flexbox wird von allen wichtigen Browsern unterstützt, außer IE < 10. Einige aktuelle Browserversionen, wie Safari 8 und IE10, erfordern Vendor-Präfixe. Für eine schnelle Möglichkeit, Präfixe hinzuzufügen, verwenden Sie Autoprefixer. Weitere Details in dieser Antwort.

---

Zentrierungslösung für ältere Browser

Für eine alternative Zentrierungslösung unter Verwendung von CSS-Tabellen- und Positionierungseigenschaften siehe diese Antwort: https://stackoverflow.com/a/31977476/3597276

Answer 3

Hinzufügen

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

zum Container-Element von dem, was Sie zentrieren möchten. Dokumentation: justify-content und align-items.

Answer 4

Sie können verwenden

display: flex;
align-items: center;
justify-content: center;

auf Ihrem Elternelement

Answer 5

Vergessen Sie nicht, wichtige browserspezifische Attribute zu verwenden:

align-items: center; -->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justify-content: center; -->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Sie könnten diese beiden Links lesen, um das Flexbox-Layout besser zu verstehen: http://css-tricks.com/almanac/properties/j/justify-content/ und http://ptb2.me/flexbox/

Viel Glück.