display: flex;
height: 300px;
}
.vertically-centered {
margin: auto;
}
PS：解决兼容性问题
对于Flexbox 以前的几个版本可以使用Autoprefixer后处理程序来实现css3代码自动补全。比如：
CSS Code复制内容到剪贴板
display: flex;
编译后：
CSS Code复制内容到剪贴板
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
如果你使用Sass，那么可以使用@mixin来解决flexbox版本兼容，直接@include进来就可以轻松解决三个版本的兼容问题；这样可以支持到IE10 +, 移动端浏览器和最新的FF, Safari, Chrome, IE11, Opera等。
github项目地址：sass-flex-mixin
