центрирования содержимого по горизонтали с помощью Flexbox

Question

Я изо всех сил к центру по горизонтали некоторое содержание в моем контейнере:

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>

Я бы подумал оправдает-содержание бы сделал трюк, но безрезультатно.

Любая помощь была бы принята с благодарностью Спасибо!

Answer 1

Свойство justify-content:center выравнивает Flex-элементы вдоль гибкого направления - использовать align-items:center - см демо ниже:

.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>

См: Flexbox W3C spec

Ниже изображение, которое применяется, когда flex-direction является строки:

а. Выравнивание главной оси: обоснование-содержание

b. Поперечное выравнивание оси: выравнивание-деталь

Когда flex-direction является строкой, главная ось находится в горизонтальном положении, но когда это столбца, это наоборот.

Answer 2

Добавить align-items:center;

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

Answer 3

Удалить flex-direction:column и max-width:500px. Дайте фиксированную ширину 100px, и она будет работать правильно. Если вы используете flex-direction:column, используйте align-items:center Недвижимость в горизонтальном центре и justify-center, если это row.