盒子水平垂直居中

思路

1、让盒子的原点放在屏幕中间（绝对定位可以做到）；
2、让盒子X,Y轴都移动自己距离的一半(translate()可以做到)

.div{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 400px;
  height: 400px;
  background-color: blueviolet;
}