Flexbox: Horizontal und vertikal zentrieren

Ich denke, Sie wollen etwas wie das Folgende.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    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;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

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

Ihre .flex-item'-Elemente sollten auf Blockebene sein (divstattspan`), wenn Sie wollen, dass die Höhe und das obere/untere Padding richtig funktionieren.

Setzen Sie außerdem bei .row die Breite auf auto anstelle von 100%.

Ihre .flex-container Eigenschaften sind in Ordnung.

Wenn Sie möchten, dass die "row" vertikal im Viewport zentriert wird, weisen Sie "html" und "body" eine Höhe von 100 % zu und heben Sie auch die Ränder von "body" auf.

Beachten Sie, dass .flex-container eine Höhe benötigt, um den Effekt der vertikalen Ausrichtung zu sehen, andernfalls berechnet der Container die minimale Höhe, die benötigt wird, um den Inhalt zu umschließen, was in diesem Beispiel weniger als die Höhe des Viewports ist.

Fußnote: Die Eigenschaften flex-flow, flex-direction, flex-wrap hätten dieses Design einfacher implementieren können. Ich denke, dass der "row"-Container nicht benötigt wird, es sei denn, man möchte den Elementen ein gewisses Styling hinzufügen (Hintergrundbild, Rahmen usw.).

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

Wie man Elemente in Flexbox vertikal und horizontal zentriert

Im Folgenden finden Sie zwei allgemeine Lösungen für die Zentrierung.

Eine für vertikal ausgerichtete Flexelemente (flex-direction: column) und die andere für horizontal ausgerichtete Flexelemente (flex-direction: row).

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

Hier's das HTML für beide:

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS (ohne dekorative Stile)

Wenn Flex-Elemente vertikal gestapelt werden:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

[DEMO](http://jsfiddle.net/8o29y7pd/)

Wenn Flexelemente horizontal gestapelt werden:

Passen Sie die Regel "flex-direction" aus dem obigen Code an.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

[DEMO](http://jsfiddle.net/8o29y7pd/3/)

Zentrierung des Inhalts der flexiblen Elemente

Der Geltungsbereich eines [Flex-Formatierungskontexts] (https://www.w3.org/TR/css-flexbox-1/#flex-containers) ist auf eine Eltern-Kind-Beziehung beschränkt. Die Nachkommen eines Flex-Containers, die über die Kinder hinausgehen, nehmen nicht am Flex-Layout teil und ignorieren die Flex-Eigenschaften. Im Grunde genommen sind Flex-Eigenschaften nicht über die Kinder hinaus vererbbar.

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

Um Text oder andere Inhalte, die in einem flex-Element enthalten sind, 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;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Mehr Details hier: https://stackoverflow.com/q/25311541/3597276

Alternativ können Sie auch margin: auto auf das Inhaltselement des flex-Elements anwenden.

p { margin: auto; }

Erfahren Sie mehr über Flex auto margins 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 Umbrüchen), ist die Eigenschaft align-content für die achsenübergreifende Ausrichtung notwendig.

Aus der Spezifikation:

[**8.4. Packing Flex Lines: the align-content

Eigenschaft**](https://www.w3.org/TR/css-flexbox-1/#align-content-property)

Die Eigenschaft "align-content" richtet die Zeilen eines Flex-Containers innerhalb des Flex-Container aus, wenn in der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie bei wie justify-content die einzelnen Elemente innerhalb der Hauptachse ausrichtet. Hinweis: Diese Eigenschaft hat keine Auswirkung auf einen einzeiligen Flex-Container.

Mehr Details hier: https://stackoverflow.com/q/42613359/3597276

Browser-Unterstützung

Flexbox wird von allen wichtigen Browsern unterstützt, außer IE < 10. Einige neuere Browser-Versionen, wie Safari 8 und IE10, erfordern Hersteller-Präfixe. Für eine schnelle Möglichkeit, Präfixe hinzuzufügen, verwenden Sie Autoprefixer. Mehr Details in diese Antwort.

Zentrierungslösung für ältere Browser

Eine alternative Lösung für die Zentrierung mithilfe von CSS-Tabellen und Positionierungseigenschaften finden Sie in dieser Antwort: https://stackoverflow.com/a/31977476/3597276

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;

Zum besseren Verständnis von Flex können Sie diese beiden Links lesen: http://css-tricks.com/almanac/properties/j/justify-content/ und http://ptb2.me/flexbox/

Viel Glück!