如何让盒子在页面中水平垂直居中？

第一种方法：
position:fixed;
left:50%;top:50%;
margin-left:-元素宽度一半;
margin-top:-元素高度的一半;
第二种方法：（常用）
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;

第三种方法：利用transform居中

width: 100px;

height: 100px;

background-color: red;

position: absolute;  开启子绝父相

left: 50%;  

top: 50%;

transform: translate(-50%,-50%);