Zentrieren Inhalt horizontal mit Flexbox

Question

Ich kämpfe horizontal einige Inhalte in meinem Behälter zum Zentrum:

https://jsfiddle.net/y56t31q9/6/

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    background-color: blue; 
 
    justify-content: center; 
 
    /* Not centering content horizontally? */ 
 
} 
 
.item { 
 
    max-width: 500px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    border: 2px solid red; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <section class="item"></section> 
 
    <section class="item"></section> 
 
    <footer class="item"></footer> 
 
</div>

Ich hätte gedacht, rechtfertigen Inhalt hätte den Trick gemacht, aber ohne Erfolg.

Jede Hilfe würde sehr geschätzt Vielen Dank!

Answer 1

Die Eigenschaft justify-content:center richtet die Flex-Elemente entlang der Flex-Richtung - align-items:center verwenden - siehe Demo unter:

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    background-color: blue; 
 
    justify-content: center; 
 
    align-items:center;/*NEW*/ 
 
} 
 
.item { 
 
    max-width: 500px; 
 
    width: 250px;/*NEW*/ 
 
    height: 100px; 
 
    background-color: yellow; 
 
    border: 2px solid red; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <section class="item"></section> 
 
    <section class="item"></section> 
 
    <footer class="item"></footer> 
 
</div>

Siehe: Flexbox W3C spec

Unten ist ein Bild, das gilt, wenn flex-directionZeile:

a. Hauptachsenausrichtung: justify-content

b. Quer Achsausrichtung: align-Elemente

Wenn die flex-direction ist Zeile, die Hauptachse horizontal ist, aber wenn es sich um Spalte , ist es umgekehrt.

Answer 2

hinzufügen align-items:center;

.container { 
    display: flex; 
    flex-direction: column; 
    width: 600px; 
    background-color: blue; 
    justify-content: center; 
    align-items:center; 
} 

Answer 3

Entfernen Sie flex-direction:column und max-width:500px. Geben Sie einige feste Breite sagen 100px und es wird richtig funktionieren. Wenn Sie flex-direction:column verwenden, verwenden Sie align-items:center Eigenschaft horizontal zu zentrieren und , wenn es row ist.