1）先将元素通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题
.parent { position: relative;}
.child { position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
2）如果盒子有宽高：设置四个方向的值都为0，并将margin设置为auto
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3）如果盒子宽高已知，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
.parent { position: relative;}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 自身 height 的一半的负值 */
margin-left: -50px; /* 自身 width 的一半 的负值*/
}
4）利用flex布局设置容器的垂直和水平方向上为居中对齐
.parent {
display: flex;
justify-content:center;
align-items:center;
}
