CSS 垂直居中 justify-content 属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

div{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial设置该属性为它的默认值。请参阅 initial。
inherit从父元素继承该属性。请参阅 inherit。

注意: Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。
注意: Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性