前言
下面分内联元素、块级元素总结
并且强力推荐flex布局
内联元素
单行
// 水平居中
text-align: center;
// 垂直居中
height: 100px;
line-height: 100px;
多行文字：利用table
.parent {
display: table;
}
.children {
// 使其成为单元格
display: table-cell;
text-align: center;
vertical-align: middle;
}
块级元素
- 宽度已知
/* 最常用 */
margin: 0 auto;
/* 绝对定位 */
.parent {
position: relative;
}
.children {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
- 宽度未知
/* 绝对定位：基本同上，替换margin为CSS3的transform 需注意浏览器兼容*/
transform: translate(-50%,-50%);
/* 同内联元素，利用table */
display:table-cell;
CSS3:Flex布局
// 内联元素 display: inline-flex
display: flex;
// 垂直居中
align-items: center;
// 水平居中
justify-content: center;
