生成一個水平+垂直居中的div

　　這是前端佈局常常用到的佈局方式，水平垂直居中；面試也常常會問到。

一. 絕對定位實現居中

注意：使用絕對定位佈局的時候，外層元素必須也設置有position屬性，具體設置爲何值看具體狀況。只要不是static就行。

1.經過定位+margin實現

將四個方向的偏移量設爲0，而後用margin:auto實現居中。

 1 .center {
 2     /* div的基本屬性 */
 3     height: 500px;
 4     width: 500px;
 5     background-color: blue;
 6     /* 絕對定位  */
 7     position: absolute;  
 8     /* 經過定位+margin實現雙居中 */
 9     top: 0;
10     left: 0;
11     bottom: 0;
12     right: 0;
13     margin:auto;
14 }

2.經過定位+transform實現

設置top和left偏移量爲50%，此時的正中間是div開始的位置，也就是div的坐上角，因此還須要向左上方向移動50%的寬(高)度。

.center {
    /* div的基本屬性 */
    height: 500px;
    width: 500px;
    background-color: blue;
    /* 絕對定位  */
    position: absolute;  
    /* 經過定位+transform實現雙居中 */
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

3.經過定位+margin實現（這種方法必需要知道居中div的長寬）

這個方法相似於第二種，經過設置top、left的偏移量，而後經過把margin-top,margin-left的值設置爲50%的寬(高)度做爲矯正。

 1 .center {
 2     /* div的基本屬性 */
 3     height: 500px;
 4     width: 500px;
 5     background-color: blue;
 6     /* 絕對定位  */
 7     position: absolute;  
 8     /* 經過定位+margin實現雙居中 */
 9     top: 50%;
10     left: 50%;
11     margin-top: -250px;
12     margin-left: -250px;
13 }

 

二. 經過flex佈局實現居中

1.經過把父元素變成flex佈局，再設置align-items和justify-content屬性便可

 1 .father{
 2     /* 父元素的基本屬性 */
 3     height: 1000px;
 4     width: 1000px;
 5     border: 1px solid red;
 6     /* 設置爲flex佈局 */
 7     display: flex;
 8     /* 設置flex屬性 */
 9     align-items: center;
10     justify-content: center;
11 }
12 .center {
13     /* div的基本屬性 */
14     height: 500px;
15     width: 500px;
16     background-color: blue;
17 }