一、水平居中
1、margin+定宽:
width: 100px;margin: 0 auto;
2、table + margin:
display: table;margin: 0 auto;
(display: table 在表现上类似 block 元素,但是宽度为内容宽。)
3、inline-block + text-align:(用于多个块级元素)
.child {
display: inline-block;
}
.parent {
text-align: center;
}
兼容性佳(甚至可以兼容 IE 6 和 IE 7)
4、 absolute + margin-left:
.parent {
position: relative;
}
.child {
position: absolute;
left:50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
宽度固定
相比于使用transform ,有兼容性更好
5、 absolute + transform:
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
绝对定位脱离文档流,不会对后续元素的布局造成影响。
transform 为 CSS3 属性,有兼容性问题
6、 flex + justify-content
.parent {
display: flex;
justify-content: center;
}
只需设置父节点属性,无需设置子元素
flex有兼容性问题
二、垂直居中
垂直居中:vertical-align:middle;
父元素高度不确定的文本,图片,块级元素的竖直居中:给父元素设置相同的上下边距实现
父元素高度确定的单行文本垂直居中:line-height值与父元素的高度值相同
1、table-cell + vertical-align:
.parent {
display: table-cell;
vertical-align: middle;
}
兼容性好(IE 8以下版本需要调整页面结构至 table)
2、absolute + transform:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform 为 CSS3 属性,有兼容性问题
同水平居中,这也可以用margin-top实现,原理水平居中
3、flex + align-items:
如果说absolute强大,那flex是最强的。但它有兼容问题
.parent {
display: flex;
align-items: center;
}
3、水平垂直居中
1、absolute + transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
绝对定位脱离文档流,不会对后续元素的布局造成影响。
transform 为 CSS3 属性,有兼容性问题
2、inline-block + text-align + table-cell + vertical-align
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
兼容性好
3、flex + justify-content + align-items
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /垂直居中/
}