flex布局实现水平垂直居中

布局：
<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;
}