方法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 }