Wie zentriert man einen Flexbox-Container horizontal und vertikal?

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

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/

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

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

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

Hinzufügen

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

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

Sie können Gebrauch machen

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

auf Ihrer übergeordneten Komponente

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.

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

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>