flex布局实现div的水平垂直居中

代码如下：

<div class="outerContainer">
    <div class="innerContent">div>
div>

.outerContainer{
    width:100%;
    height:100%;
    background:#eee;
    display:flex;
    justify-content: center;
    align-items: center;
}
.innerContent{
    width:300px;
    height:300px;
    background: #fff;
    border:1px solid #ccc;
}

效果图：