Center content horizontally with flexbox

Question

I am trying to center horizontally the contents in a container:

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> 

I would have thought that exculpatory content would do the trick, but to no avail.

Any help would be greatly appreciated Thank you!

Answer 1

The justify-content:center property aligns bend elements along the bend direction - use align-items:center - see the demo below:

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

Contact: Flexbox W3C Specification

The following is an image that applies when flex-direction is a string:

a. Main axis alignment: justify-content

b. Alignment: Alignment

When the flex-direction row is a row, the main axis is horizontal, but when it is a column, it is the other way around.

Answer 2

Add align-items:center;

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

Answer 3

Remove flex-direction:column and max-width:500px . Give some fixed width, say 100px, and it will work correctly. If you use flex-direction:column , use the align-items:center property for the horizontal center and justify-center if it is row .