So zentrieren Sie Elemente vertikal und horizontal in Flexbox
Nachfolgend finden Sie zwei allgemeine Zentrierlösungen.
Eine für vertikal ausgerichtete Flex-Elemente ( flex-direction: column) und die andere für horizontal ausgerichtete Flex-Elemente ( flex-direction: row).
In beiden Fällen kann die Höhe der zentrierten Divs variabel, undefiniert, unbekannt sein, was auch immer. Die Höhe der zentrierten Divs spielt keine Rolle.
Hier ist der HTML-Code für beide:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (ohne dekorative Stile)
Wenn flexible 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
Wenn flexible Elemente horizontal gestapelt werden:
Passen Sie die flex-directionRegel anhand des obigen Codes 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
Zentrieren des Inhalts der Flex-Elemente
Der Umfang eines Flex-Formatierungskontexts ist auf eine Eltern-Kind-Beziehung beschränkt. Nachkommen eines Flex-Containers außerhalb der Kinder nehmen nicht am Flex-Layout teil und ignorieren die Flex-Eigenschaften. Im Wesentlichen sind Flex-Eigenschaften nicht über die Kinder hinaus vererbbar.
Daher müssen Sie immer display: flexoder display: inline-flexauf ein übergeordnetes Element anwenden, um Flex-Eigenschaften auf das untergeordnete Element anzuwenden.
Um Text oder anderen Inhalt eines Flex-Elements 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 */
}
Weitere Details hier: Wie kann ich Text in einer Flexbox vertikal ausrichten?
Alternativ können Sie margin: autodas Inhaltselement des Flex-Elements anwenden .
p { margin: auto; }
Weitere Informationen zu Flex- autoRändern finden Sie hier: Methoden zum Ausrichten von Flex-Elementen (siehe Kasten Nr. 56).
Zentrieren mehrerer Zeilen flexibler Elemente
Wenn ein Flex-Container mehrere Linien hat (aufgrund des Umbruchs), ist die align-contentEigenschaft für die Ausrichtung über die Achse erforderlich.
Aus der Spezifikation:
8.4. Packing Flex Lines: die align-content
Eigenschaft
Die align-contentEigenschaft richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn auf der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie bei der justify-contentAusrichtung einzelner Elemente auf der Hauptachse.
Beachten Sie, dass diese Eigenschaft keine Auswirkungen auf einen einzeiligen Flex-Container hat.
Weitere Details hier: Wie funktioniert Flex-Wrap mit Align-Self, Align-Items und Align-Content?
Browser-Unterstützung
Flexbox wird von allen gängigen Browsern außer IE <10 unterstützt . Einige neuere Browserversionen wie Safari 8 und IE10 erfordern Herstellerpräfixe . Verwenden Sie Autoprefixer , um schnell Präfixe hinzuzufügen . Weitere Details in dieser Antwort .
Zentrierlösung für ältere Browser
Eine alternative Zentrierungslösung mit CSS-Tabelle und Positionierungseigenschaften finden Sie in dieser Antwort: https://stackoverflow.com/a/31977476/3597276
