html - Centering content horizontally using flexbox

I'm struggling to center horizontally some content in my 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;
}

I would have thought justify-content would have done the trick, but to no avail.

Any help would be greatly appreciated
Thanks!

Answer

The property justify-content:center aligns the flex-items along the flex direction - use align-items:center- see 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;
}

Refer: Flexbox W3C spec

Below is an image that applies when flex-direction is row:

a. Main axis alignment : justify-content

b. Cross axis alignment : align-items

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