CSS 居中
阿新 • • 發佈：2017-06-21
lin round ott gif ext borde translate -- dia 
一、水平或垂直居中
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 }
二、水平+垂直居中
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>middle¢er
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; }
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>
CSS 居中