最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧查阅资料分析一波，给各位分享一下，避免落坑。
首先先说明一下html和一些基础css样式，下面就不再赘述！
html
垂直水平居中
公共css代码如下
/* 公共样式 */
.div1{
width: 300px;
height: 300px;
border:1px solid aqua;
}
.box{
background: #00FFFF;
}
.box.size{
width:100px;
