一、水平或垂直居中
1. 单行内容垂直居中
/*height = line-height*/ .center{ height: 4em; line-height: 4em; overflow: hidden; /*保护布局，非必须*/ }
支持：所有块级、内联元素、所有浏览器
缺点：只能显示一行
2. div水平居中
<!--html代码--> <div class="center">div居中了</div>
body{ text-align:center} .center{ margin:0 auto; /*main*/ width:400px; height:100px; border:1px solid #F00 }
3. float
给父元素设置float，然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现
二、水平+垂直居中
1. 非固定高度居中
.middle{ position:absolute; top:10px; bottom:10px; }
支持：所有块级、内联元素、所有浏览器
缺点：容器不能固定高度
2. 利用表格
.middle{ display: table-cell; height: 300px; vertical-align: middle; }
缺点：IE无效
3. margin负值
.middle { width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -200px; /* width/2 */ margin-top: -100px; /* height/2 */ }
支持：ie各个版本
缺点：非响应式，宽高固定，需要为padding预留空间或用box-sizing:border-box
4. 完全居中
<!DOCTYPE html> <html> <head> <title>text-align</title> <style type="text/css" media="screen"> body { text-align: center } .middle { background: red; bottom: 0; height: 100px; left: 0; margin: auto; position: absolute; top: 0; right: 0; width: 100px; } </style> </head> <body> <div class="middle">center</div> </body> </html>
5. fixed（可视区域内居中）
.middle { position: fixed; z-index: 999; /*设置较大的z-index居于其他元素上方 最好在外层容器设置position:relative */ }
6. transform
.middle { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
缺点： 不支持IE8
7. inline-block
.middle{ display: inline-block; vertical-align: middle;
text-align: center; }
8. Flex方法
<div class="container"> <!--容器内的元素将会居中--> <img src="a.jpg"> </div>
.container{ display: flex; justify-content: center; align-items: center; } /*考虑兼容性 */ .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
1.设置container的display的类型为flex，激活为flexbox模式。
2.justify-content定义水平方向的元素位置
3.align-items定义垂直方向的元素位置
支持：任意宽高
不支持IE8-9
三、图片居中
1. align
<div align="center"><img src="a.jpg" /></div>
2. text-align
<div style="text-align:center"><img src="a.jpg" /></div>
四、对照表
|
所用样式 |
支持的浏览器 |
是否 响应式 |
内容溢出后的样式 |
resize:both |
高度可变 |
主要缺陷 |
|
Absolute |
现代浏览器&IE8+ |
是 |
会导致容器溢出 |
是 |
是* |
‘可变高度’的特性不能跨浏览器 |
|
负margin值 |
所有 |
否 |
带滚动条 |
大小改变后不再居中 |
否 |
不具有响应式特性，margin值必须经过手工计算 |
|
Transform |
现代浏览器&IE9+ |
是 |
会导致容器溢出 |
是 |
是 |
妨碍渲染 |
|
Table-Cell |
现代浏览器&IE8+ |
是 |
撑开容器 |
否 |
是 |
会加上多余的标记 |
|
Inline-Block |
现代浏览器&IE8+&IE7* |
是 |
撑开容器 |
否 |
是 |
需要使用容器包裹和hack式的样式 |
|
Flexbox |
现代浏览器&IE10+ |
是 |
会导致容器溢出 |
是 |
是 |
需要使用容器包裹和厂商前缀（vendor prefix） |
持续更新······
如有建议或其他实现方法，欢迎留言交流~