方法1：利用定位position
方法1.1：已知盒子的高度和宽度。
1 .parent{ 2 position:relative; 3 } 4 .child{ 5 position:absolute; 6 top:50%; 7 left:50%; 8 margin-top:-50px; 9 margin-left:-50px; 10 }
方法1.1：的原理就是 定位中心点事盒子的左上顶点，所以定位之后需要退回盒子高宽一半的距离。
方法1.2：利用 margin:auto 属性。
1 .parent{ 2 position:relative; 3 } 4 .child{ 5 position:absolute; 6 margin:auto; 7 top:0; 8 left:0; 9 right:0; 10 bottom:0; 11 }
方法1.3： 利用transform，可以不用定义盒子的具体高度和宽度。
1 .parent{ 2 position:relative; 3 } 4 .child{ 5 position:absolute; 6 top:50%; 7 left:50%; 8 transform:translate(-50%,-50%); 9 }
方法2：利用display:flex
1 .parent{ 2 display:flex; 3 justify-content:center; // 盒子元素在主轴（横轴、x轴）方向上的对齐方式 4 align-items:center; // 用来设置每个flex元素在交叉轴上的默认对齐方式 5 }
方法3：利用display：table-cell
1 .parent{ 2 display:table-cell; 3 vertical-align:middle; 4 text-align:center; 5 } 6 .child{ 7 display:inline-block; 8 }
方法4：计算父盒子与子盒子的空间距离（与方法1是一个道理）
//计算方法：父盒子高度或者宽度的一半减去子盒子高度或者宽的的一半。 .child{ margin-top:200px; margin-left:200px; }
方法5：利用calc计算
1 .parent{ 2 position:relative; 3 } 4 .child{ 5 position:absolute; 6 top:calc(200px);//（父元素高-子元素高）÷ 2=200px 7 let:calc(200px);//（父元素宽-子元素宽）÷ 2=200px 8 }