常见居中样式和Flex布局实测（含浏览器兼容）

flex布局
*/
//flex纵向排列
.flex-direction-colum {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*居中*/
.allCenter {
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
}

//水平居中
.x-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

//flex水平均匀分布
.x-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

image.png

.x-around {
    -webkit-box-pack: justify;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

//效果图

image.png

.x-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

image.png

//垂直居中
.y-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
}

.y-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

image.png

/*
其他布局
*/

//通过绝对定位实现水平居中
.transform-x-center {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%)translateY(0);
    transform: translateX(-50%)translateY(0);
}

//通过绝对定位实现垂直居中
.transform-y-center {
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(0)translateY(-50%);
    transform: translateX(0)translateY(-50%);
}

//通过绝对定位实现水平垂直居中
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%)translateY(-50%);
    transform: translateX(-50%)translateY(-50%);
}