CSS布局div之水平居中与垂直居中

水平居中
一个方法就可以：给div设置一个宽度，然后添加 margin:0 auto 属性。
任意的position属性都可以。（fixed absolute relative static）

div{
    width:200px;
    margin:0 auto;
}

水平垂直都居中
方法一：通过绝对定位实现

div{
    position:absolute;
    width:300px;
    height:300px;
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:purple;
}

方法二：设置层的外边距把div的中心点移到包含块的原点位置，再通过相对定位或者绝对定位向下向右移动50%；
要保证包含块有高度。
当position设置为relative时，若要使div在浏览器窗口垂直水平居中，需要将body以及html的height都设置为100%。

div{
    position:relative; /*或者absolute*/
    width:600px;
    height:400px;
    margin:-300px 0 0 -200px;
    top:50%;
    left:50%;
    background-color:purple;
}

提示：
使用百分比单位时：
乘以包含块的高度 top, bottom, height, max-height, min-height。
乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 。

方法三：容器高度不定，采用“transform”属性

div{
    position:relative; /*或者absolute*/
    width:600px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color:purple;
}

注意：transform属性需要考虑浏览器兼容问题，加上不同内核前缀。

方法四：利用flex布局

.container{
    display:flex;
    display:-webkit-flex;  /*浏览器兼容*/
    align-items:center;  /*垂直居中*/
    justify-content:center;  /*水平居中*/
}
.container div{
    width:100px;
    height:200px;
    background-color:purple;
}

参考：
flex布局详解