显示flex，如何在块的中心对齐？

Question

我正在学习显示flex，我有一些问题，我无法弄清楚。 我试图将我的网格项对齐在横轴的中心，但是有些不对而且不起作用。

.grid-container
  display: flex
  border: 5px solid red
  align-content: center
  justify-content: space-around
  height: 300px
  width: 50%
  .grid-element
    height: 100px
    background: green

这是codepen https://codepen.io/anon/pen/grOjrO