常用的水平垂直居中方法总结

下面分内联元素、块级元素总结，flex布局均适用于这两者，故独立出来

内联元素

// 水平
text-align: center;
// 垂直：设置两者相等 
height: 100px;
line-height: 100px;

多行文字：利用table

.parent {
    display: table;
}

.children {
    // 使其成为单元格
    display: table-cell;
    text-align: center;
    vertical-align: middel;
}

块级元素

1.宽度已知

/* 最常用 */
margin: 0 auto;

/* 绝对定位 */
.parent {
    position: relative;
}

.children {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

2.宽度未知

/* 绝对定位：基本同上，替换margin为css3的transform 需注意浏览器兼容*/
transform: translate(-50%,-50%); 

/* 同内联元素，利用table */
display:table-cell;

CSS3:Flex布局

// 内联元素
// display: inline-flex
display: flex;
// 垂直居中
align-items: center;
// 水平居中
justify-content: center;