参考：www.cnblogs.com/lvhw/p/6754…
如何让div盒子在它的父元素中水平垂直居中
效果图如下：
1.利用绝对定位和相对定位，以及对div盒子中的top、left、transform等属性的操作
如果对transform不理解，可以去juejin.cn/post/712208…
注释：top：50%代表box2盒子距离box1盒子的顶部 （50%*（box1的高度）） 的距离
2.利用top,bottom,left,right为0，margin为auto的方法
注释： 1.margin：auto代表浏览器计算外边距
2.当top,bottom,left,right都为0时，box2会因为自身的宽度和高度不足，在父元素上的初始位置显示，但设置margin为auto,会分别将子元素在父元素中的边距设置为水平垂直居中的距离
3.利用弹性盒子，以容器的属性（justify-content、align-items），将box1设置为弹性盒子时，box2就会脱离文档流
容器属性：justify-content属性定义了box2在主轴上的对齐方式。
align-items属性定义项目在交叉轴（也就是与主轴垂直的轴）上如何对齐。
4.隔离父子元素来设置边距margin
注释： 1.在单独给box2设置边距的情况下,会出现边距重叠的问题
2.利用box1前面添加一个空table来分离box1和box2,这样就可以单独给子元素box2设置外边距来达到垂直水平居中的效果.
5.将父元素转化为table-cell类型
注释：将父元素box1转化为table-cell类型,并设置vertical-align为居中状态可以达到水平居中的效果.如果子元素为div等块级元素需转化为inline-block类型,设置text-align为居中状态可以达到垂直居中的效果
