一
最常见水平居中:
垂直水平居中:
1 2 3 4 5 6 7 8 9 10 11
| ◆absolute/fixed(脱离文档) .div{ position: absolute;/fixed width: 100px; height: 100px; background: red; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
|
优点:所有浏览器都支持
缺点:div元素必须固定宽高,灵活性差
适用:固定宽高的div
二
1 2 3 4 5 6 7 8 9 10 11 12
| ◆absolute/fixed .div{ position: absolute;/fixed margin: auto; top: 0; left: 0 bottom: 0; right: 0; width: 100px; height: 100px; background: red; }(会根据文档自动计算距离)
|
缺点:IE6、IE7不支持
优点:高度长度可以自适应,适合用在移动端
三
1 2 3 4 5 6 7 8 9
| ◆table-cell .div{ background: red; display: table-cell; vertical-align: middle; width: 100px; height: 100px; text-align: center; }
|
缺点:高度无法到达100%(在外层套一层table-cell);添加浮动后垂直居中会失效,只能实现行内元素的水平居中,块级元素不能水平居中(在块级元素中添加 margin: 0 auto就能居中);IE7以下不支持
优点:适用的场景多
四
只支持行内元素,行内块级元素居中
CSS3居中一
针对盒子模型
1 2 3 4 5 6
| .div{ height: 100px; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }
|
缺点:无法再IE9以下使用
优点:无论里面有多少元素都能居中
适用:除了IE浏览器都超好用
CSS3居中二
1 2 3 4 5 6 7 8 9 10
| .div{ width: 100px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background: red; }
|
缺点:IE9以下不支持
优点:高度和宽度可以随意定义
适用:移动端
神奇的方法
1 2 3 4 5 6 7 8 9 10 11 12 13
| .div:before { content: ‘ ‘; display: inline-block; height: 100%; vertical-align: middle; background: #000; } .dived { display: inline-block; vertical-align: middle; width: 100px; background: red; }
|
以before作为参考线居中
优点:可以随意改变宽度和高度