通过Flex布局设置水平垂直居中

效果如下：

实现代码：

通过给父元素设置CSS样式：

display:flex;
align-items:center;
justify-content:center;

//HTML

<div class='box'>
    <div class='box-item'>
    </div>
</div>

//css
.box{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    background:white;
}
.box-item{
    height:200px;
    width:200px;
    background:red;
}