1 <div class="father">                // 结构
 2         <div class="son"></div>
 3  </div>
 4         /* 通过 transform 属性来移动*/
 5         .father {
 6             width: 500px;
 7             height: 500px;
 8             background-color: skyblue;
 9             border: 1px solid #000;
10             margin: 0 auto;
11         }
12         .son {
13             width: 200px;
14             height: 200px;
15             background-color: pink;
16             border: 1px solid #000;
17             margin-top: 50%;                  // 向下移动父盒子的一半
18             transform: translateY(-50%);      // 向上移动自身盒子的一半
19         }      
20     
21             /* 通过 定位来移动*/
22            .father {
23             width: 500px;
24             height: 500px;
25             background-color: skyblue;
26             border: 1px solid #000;
27             margin: 0 auto;
28             position: relative;
29         }
30         .son {
31             width: 200px;
32             height: 200px;
33             background-color: pink;
34             border: 1px solid #000;
35             position: absolute;
36             top: 50%;                  // 先向下移动父盒子的一半
37             margin-top: -100px;        // 再向上移动自身盒子的一半
38             
39         }    

 1 　　　　 .father {
 2             width: 500px;
 3             height: 500px;
 4             background-color: skyblue;
 5             border: 1px solid #000;
 6             display: table-cell;         // 显示形式为表格
 7             vertical-align: middle;      // 里面内容为居中对齐
 8         }
 9         .son {
10             width: 200px;
11             height: 200px;
12             background-color: pink;
13             border: 1px solid #000;
14         }

 1 　　　　 .father {
 2             width: 500px;
 3             height: 500px;
 4             background-color: skyblue;
 5             border: 1px solid #000;
 6             margin: 50px auto;
 7             
 8         }
 9         .son {
10             width: 200px;
11             height: 200px;
12             background-color: pink;
13             border: 1px solid #000;
14             margin-top: 149px;         // 根据父盒子的高度指定 margin-top 即可
15         }

 1 　　　　　.father {
 2             width: 500px;
 3             height: 500px;
 4             background-color: skyblue;
 5             border: 1px solid #000;
 6             margin: 50px auto;
 7             
 8         }
 9         .son {
10             width: 200px;
11             height: 200px;
12             background-color: pink;
13             border: 1px solid #000;
14             margin: 0 auto;           // 让盒子左右自动适应，想当于 left:auto; right:auto
15         }

 1 　　　　　.father {
 2             width: 500px;
 3             height: 500px;
 4             background-color: skyblue;
 5             border: 1px solid #000;
 6             margin: 50px auto;
 7             
 8         }
 9         .son {
10             width: 200px;
11             height: 200px;
12             background-color: pink;
13             border: 1px solid #000;
14             margin-left: 149px;          // 父盒子的定宽的，指定 margin-left 即可
15         }

 1 /* 通过 transform 实现*/
 2 　　　　.father {
 3             width: 500px;
 4             height: 500px;
 5             background-color: skyblue;
 6             border: 1px solid #000;
 7             margin: 50px auto;
 8             
 9         }
10         .son {
11             width: 200px;
12             height: 200px;
13             background-color: pink;
14             border: 1px solid #000;
15             margin-left: 50%;                // 先移动父盒子的一半
16             transform: translateX(-50%);     // 再移动自身盒子一半
17 
18         }
19 　　　　/*通过 定位实现*/
20 　　　　.father {
21             width: 500px;
22             height: 500px;
23             background-color: skyblue;
24             border: 1px solid #000;
25             margin: 50px auto;
26             position: relative;
27             
28         }
29         .son {
30             width: 200px;
31             height: 200px;
32             background-color: pink;
33             border: 1px solid #000;
34             position: absolute;
35             left: 50%;                       // 向右移动父盒子一半
36             margin-left: -100px;             // 向左移动自身盒子一半
37             /* transform: translateX(-50%); */    //向左移动自身盒子一半

 38 }

 1 　　　　　.father {
 2             width: 500px;
 3             height: 500px;
 4             background-color: skyblue;
 5             border: 1px solid #000;
 6             margin: 50px auto;
 7             text-align: center;               // 让父盒子设置水平居中
 8             
 9         }
10         .son {
11             width: 200px;
12             height: 200px;
13             background-color: pink;
14             border: 1px solid #000;
15             display: inline-block;            // 让子盒子显示为行内块模式
16         }