CSS3 水平垂直居中的6种方法

1、flex布局

flex-direction是啥方向，主轴就是啥方向。align-items是让子元素贴在主轴上的，justify-content是让子元素贴在副轴上的。

.father{
    height: xx px;
    display: flex;
    flex-direction: row|column;    /* 主轴方向 */
    align-items: center;    /* 主轴居中 */
    justify-content: center;    /* 副轴居中 */
}

2、table-cell布局

.father{
    height: xx px;
    display: table-cell;
    vertical-align: middle;    /* 垂直居中 */
    text-align: center;    /* 类似文本的水平居中 */
}
.child{
    display: inline-block;
}

3、绝对定位（transform方法）

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 向左、向上偏移自身宽、高的一半 */
}

4、绝对定位（margin 负值）

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -自身高度/2px;
    margin-left: -自身宽度/2px;
}

5、绝对定位（calc 计算）

.child{
    position: absolute;
    top: calc((100% - 自身高度px)/2);
    left: calc((100% - 自身宽度px)/2);
}

6、绝对定位（margin:auto）

.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}