使用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>

最后的效果图为：