使用flex布局实现div垂直居中

最近逛网站时无意看到一个新的实现div垂直居中的例子，就记录下来。
废话少说，开撸

<style> .vertical-container{ height:300px; -webkit-display:flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; border:1px solid #ccc; } .small{ width:100px; height:100px; background-color:green; } </style>

<div class="vertical-container">
   <div class="small">
   </div>
</div>

最后的效果图为：