一、盒子垂直居中的方法

1、先讓盒子的上下邊緣和父盒子的水平中心線重疊，，然後再讓子盒子往回移動自身一半的距離

 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         }    

定位的使用方法

定位有著超出尋常的地位，它可以實現你想要在任何位置放置東西。

定位的使用方法有很多，他可以讓你在排版不周的時候可以讓你強行任意移動任何到東西的位置。

定位的一個基礎用法，是不是每次都用a類包裹住b類，但是每次b類還是會被排擠出a類的範圍，這時候用浮動、外邊距和內邊距去排版，不用這麼麻煩。

定位就可以搞定。首先，先給a類的樣式新增這樣一串程式碼

position:relative;
這個是相對定位，他和絕對定位是互相吸引的。

再給b類新增上這樣一串程式碼

position:absolute;
這是絕對定位，和a類的相對定位是互相吸引的。但是這樣還是不能讓b類回到a類範圍你去。還要b類你加上top更left就可以了。（注意：b類的絕對一定要在a類相對的後面，不能讓b類放在其他樣式後面，否則a類會獲取不到b類）。

2、使用表格的 vertical-align :middle 屬性來實現盒子垂直居中

 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         }

3、知道父盒子的高度，可以使用 margin 計算盒子的上下邊距，來使盒子居中

 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、使用 margin: 0 auto;

 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         }

2、通過計算 margin 左右邊距來實現居中

 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         }

3、先讓盒子左右邊緣和父盒子垂直的中心線垂直，然後把子盒子往回移動自身寬度的一半

 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         }

4、把盒子轉成 行內塊，然後用 text-align 屬性使盒子水平居中

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         }