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

　　这是前端布局经常用到的布局方式，水平垂直居中；面试也经常会问到。

一. 绝对定位实现居中

注意：使用绝对定位布局的时候，外层元素必须也设置有position属性，具体设置为什么值看具体情况。只要不是static就行。

1.通过定位+margin实现

将四个方向的偏移量设为0，然后用margin:auto实现居中。

.center {
    /* div的基本属性 */
    height: 500px;
    width: 500px;
    background-color: blue;
    /* 绝对定位  */
    position: absolute;  
    /* 通过定位+margin实现双居中 */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin:auto;
}

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%的宽(高)度作为矫正。

.center {
    /* div的基本属性 */
    height: 500px;
    width: 500px;
    background-color: blue;
    /* 绝对定位  */
    position: absolute;  
    /* 通过定位+margin实现双居中 */
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
}

 

二. 通过flex布局实现居中

1.通过把父元素变成flex布局，再设置align-items和justify-content属性即可

.father{
    /* 父元素的基本属性 */
    height: 1000px;
    width: 1000px;
    border: 1px solid red;
    /* 设置为flex布局 */
    display: flex;
    /* 设置flex属性 */
    align-items: center;
    justify-content: center;
}
.center {
    /* div的基本属性 */
    height: 500px;
    width: 500px;
    background-color: blue;
}