Wie zentriert man einen Flexbox-Container horizontal und vertikal?

Lesezeit: 9 Minuten

Benutzer-Avatar
bsr

So zentrieren Sie a <div> horizontal und vertikal innerhalb des Containers mit Flexbox? Im folgenden Beispiel möchte ich, dass jede Zahl untereinander (in Zeilen) angezeigt wird, die horizontal zentriert sind.

.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;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

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

  • In Ihrem CSS haben Sie row{ was keine Auswirkung auf Zeilen hat. Wenn du es änderst .row{ das Ergebnis wäre ein ganz anderes.

    – Hamid Mayeli

    20. Oktober 2019 um 13:26 Uhr

Benutzer-Avatar
Marc Audet

Ich denke, Sie wollen so etwas 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;
}
<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>

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

Dein .flex-item Elemente sollten auf Blockebene sein (div anstatt span), wenn Sie möchten, dass die Höhe und die obere/untere Polsterung richtig funktionieren.

Auch auf .rowstellen Sie die Breite auf ein auto anstatt 100%.

Dein .flex-container Eigenschaften sind in Ordnung.

Wenn du willst .row vertikal im Ansichtsfenster zentriert werden soll, weisen Sie 100 % Höhe zu html und bodyund nullen Sie auch die body Ränder.

Beachten Sie, dass .flex-container benötigt eine Höhe, um den vertikalen Ausrichtungseffekt zu sehen, andernfalls berechnet der Container die minimale Höhe, die zum Einschließen des Inhalts erforderlich ist, was in diesem Beispiel kleiner als die Höhe des Anzeigeports ist.

Fußnote:

Das flex-flow, flex-direction, flex-wrap Eigenschaften hätten die Implementierung dieses Entwurfs erleichtern können. ich glaube, dass der .row Container wird nicht benötigt, es sei denn, Sie möchten den Elementen ein Styling hinzufügen (Hintergrundbild, Rahmen usw.).

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

  • Flex-Elemente müssen nicht auf Blockebene sein, es sei denn, der Inhalt, den sie enthalten, erfordert dies. Außerdem haben Sie allen Anzeigeeigenschaften ein Präfix vorangestellt, aber keinen der anderen Flexbox-Eigenschaften (die in den anderen Entwürfen andere Namen haben).

    – Zimt

    26. September 2013 um 14:32 Uhr

  • @cimmanon Ich stimme dir in Bezug auf die Blockebene zu und habe meinen Beitrag entsprechend bearbeitet. Die Blockebene ist für die Ausrichtung nicht erforderlich, kann jedoch erforderlich sein, wenn der Benutzer die Höhe usw. angeben möchte. Bei den Browser-Präfixen habe ich mir die Freiheit genommen, ich habe einfach einen perfekten Browser angenommen, um zu einer funktionierenden Demo zu gelangen. Nochmals vielen Dank für Ihren Kommentar, danke für das Feedback.

    – Marc Audet

    26. September 2013 um 14:57 Uhr


  • Wenn es überläuft, beschneidet es die Spitze. i.imgur.com/3dgFfQK.png Gibt es eine Möglichkeit, dies zu vermeiden?

    – Brian Gates

    4. September 2014 um 20:00 Uhr

  • @BrianGates Wenn die Höhe des Fensters zu kurz ist, wie sollen die 4 Elemente angezeigt werden, 2×2, 1×4?

    – Marc Audet

    5. September 2014 um 11:38 Uhr

  • Lösung ist hier: stackoverflow.com/questions/24538100/…

    – Brian Gates

    5. September 2014 um 22:19 Uhr

Benutzer-Avatar
Michael Benjamin

So zentrieren Sie Elemente vertikal und horizontal in Flexbox

Nachfolgend finden Sie zwei allgemeine Zentrierlösungen.

Einer 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 oder was auch immer sein. 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 Flex-Elemente vertikal gestapelt sind:

#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 */
}

Geben Sie hier die Bildbeschreibung ein

DEMO


Wenn Flex-Elemente horizontal gestapelt sind:

Verstelle die flex-direction Regel aus dem obigen Code.

#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;
}

Geben Sie hier die Bildbeschreibung ein

DEMO


Zentrieren des Inhalts der Flex-Elemente

Der Umfang einer Flex-Formatierungskontext ist auf eine Eltern-Kind-Beziehung beschränkt. Nachkommen eines Flex-Containers jenseits der Kinder nehmen nicht am Flex-Layout teil und ignorieren Flex-Eigenschaften. Flex-Eigenschaften sind im Wesentlichen nicht über die Kinder hinaus vererbbar.

Daher müssen Sie sich immer bewerben display: flex oder display: inline-flex auf ein übergeordnetes Element, um Flex-Eigenschaften auf das untergeordnete Element 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 */
}

Weitere Details hier: Wie kann man Text in einer Flexbox vertikal ausrichten?

Alternativ können Sie sich bewerben margin: auto zum Inhaltselement des Flex-Elements.

p { margin: auto; }

Erfahren Sie mehr über Flex auto Ränder hier: Methoden zum Ausrichten von Flex-Elementen (siehe Kasten Nr. 56).


Zentrieren mehrerer Zeilen von flexiblen Artikeln

Wenn ein Flex-Container mehrere Zeilen hat (aufgrund des Umwickelns), wird die align-content -Eigenschaft wird für die Querachsenausrichtung benötigt.

Aus der Spezifikation:

8.4. Verpackungsflexleitungen: die align-content
Eigentum

Das align-content -Eigenschaft richtet die Linien eines Flex-Containers innerhalb des Flex-Containers aus, wenn in der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie wie justify-content richtet einzelne Elemente innerhalb der Hauptachse aus.
Beachten Sie, dass diese Eigenschaft keine Auswirkung auf einen einzeiligen Flex-Container hat.

Mehr Details hier: Wie funktioniert Flex-Wrap mit align-self, align-items und align-content?


Browserunterstützung

Flexbox wird von allen gängigen Browsern unterstützt, außer IE < 10. Einige neuere Browserversionen wie Safari 8 und IE10 erfordern Anbieter-Präfixe. Verwenden Sie für eine schnelle Methode zum Hinzufügen von Präfixen Autoprefixer. Weitere Details in dieser Antwort.


Zentrierlösung für ältere Browser

Eine alternative Zentrierlösung mit CSS-Tabellen- und Positionierungseigenschaften finden Sie in dieser Antwort: https://stackoverflow.com/a/31977476/3597276

  • können wir es horizontal rechts, links und vertikal zentrieren?

    – kapil

    28. Februar 2017 um 12:28 Uhr

  • @kapil, pass die an rechtfertigen-Inhalt Eigentum zu Zwischenraum oder Raum herumjsfiddle.net/8o29y7pd/105

    – Michael Benjamin

    28. Februar 2017 um 12:54 Uhr

  • Diese Antwort sollte ganz oben stehen. Die Verwendung von Flex sollte die bevorzugte Methode sein, da es sich gut über Geräte und Bildschirme hinweg skalieren lässt. Es ist weitaus einfacher als die Verwendung von Floats und die Verwaltung mehrerer Divs, die sich daran halten.

    – SeaWarrior404

    10. November 2017 um 9:33 Uhr

  • Dh 11 funktioniert nicht richtig horizontal und vertikal zentriert

    – Job geben

    14. März 2019 um 12:02 Uhr

  • vielen Dank, dass Sie darauf hingewiesen haben, dass untergeordnete Elemente nicht automatisch Flex-Elemente sind. Wir müssen ihnen gerecht werden, wenn wir wollen, dass sie es sind.

    – Klewis

    13. Oktober 2020 um 10:29 Uhr

Hinzufügen

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

zum Containerelement dessen, was Sie zentrieren möchten. Dokumentation:
rechtfertigen-Inhalt und
Ausrichtungselemente.

Benutzer-Avatar
Vikas Gupta

Sie können Gebrauch machen

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

auf Ihrer übergeordneten Komponente

Geben Sie hier die Bildbeschreibung ein

Vergessen Sie nicht, wichtige browserspezifische Attribute zu verwenden:

Ausrichtungselemente: Mitte; –>

-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önnen diese beiden Links lesen, um Flex besser zu verstehen:
http://css-tricks.com/almanac/properties/j/justify-content/ und
http://ptb2.me/flexbox/

Viel Glück.

  • Dies ist ein guter Punkt, denn heute (um nur die neuesten Browser zu unterstützen) benötigen Sie nur die letzten beiden Zeilen -webkit.. für Safari und die letzte für alle anderen

    – Peter Kozak

    17. Juli 2014 um 12:24 Uhr


  • +1, weil alte Arbeitsentwürfe von 2009 und März 2012 immer noch einen erheblichen Benutzeranteil haben (zusammen etwa 8 % laut caniuse.com).

    – benebun

    24. September 2014 um 15:58 Uhr

  • Flext funktioniert nicht in Safari, wie könntest du dieses Problem lösen?

    – Benutzer3378649

    25. Januar 2015 um 6:38 Uhr

  • Ich habe vor vielen Tagen die letzte Version von Safari unter Windows überprüft und kann mich nicht sehr gut daran erinnern, aber ich werde es überprüfen und Ihnen sagen. Bitte sagen Sie mir, welche Version von Safari Sie meinten. und auf welchem ​​OS?

    – QMaster

    25. Januar 2015 um 13:47 Uhr

  • @ user3378649 Die neueste Safari-Version könnte Flex-Box unterstützen, siehe diesen Link: caniuse.com/#search=flexbox

    – QMaster

    4. Oktober 2016 um 18:47 Uhr

Benutzer-Avatar
MelanieP

1 – CSS für übergeordnetes div festlegen auf display: flex;

2 – Legen Sie CSS für das übergeordnete div fest flex-direction: column;
Beachten Sie, dass dadurch der gesamte Inhalt innerhalb dieser Div-Zeile von oben nach unten angezeigt wird. Dies funktioniert am besten, wenn das Eltern-Div nur das Kind enthält und sonst nichts.

3 – Legen Sie CSS für das übergeordnete div fest justify-content: center;

Hier ist ein Beispiel dafür, wie das CSS aussehen wird:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

  • Dies ist ein guter Punkt, denn heute (um nur die neuesten Browser zu unterstützen) benötigen Sie nur die letzten beiden Zeilen -webkit.. für Safari und die letzte für alle anderen

    – Peter Kozak

    17. Juli 2014 um 12:24 Uhr


  • +1, weil alte Arbeitsentwürfe von 2009 und März 2012 immer noch einen erheblichen Benutzeranteil haben (zusammen etwa 8 % laut caniuse.com).

    – benebun

    24. September 2014 um 15:58 Uhr

  • Flext funktioniert nicht in Safari, wie könntest du dieses Problem lösen?

    – Benutzer3378649

    25. Januar 2015 um 6:38 Uhr

  • Ich habe vor vielen Tagen die letzte Version von Safari unter Windows überprüft und kann mich nicht sehr gut daran erinnern, aber ich werde es überprüfen und Ihnen sagen. Bitte sagen Sie mir, welche Version von Safari Sie meinten. und auf welchem ​​OS?

    – QMaster

    25. Januar 2015 um 13:47 Uhr

  • @ user3378649 Die neueste Safari-Version könnte Flex-Box unterstützen, siehe diesen Link: caniuse.com/#search=flexbox

    – QMaster

    4. Oktober 2016 um 18:47 Uhr

Benutzer-Avatar
Polar

diplay: flex; für seinen Container und margin:auto; denn es funktioniert perfekt.

HINWEIS: Sie müssen die einrichten width und height um die Wirkung zu sehen.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}
<div id="container">
   <div class="item">CENTER</div>
</div>

1015150cookie-checkWie zentriert man einen Flexbox-Container horizontal und vertikal?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy