通过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;}