下面分内联元素、块级元素总结,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;