文章簡介: CSS 居中大全
我看最近微博流行 CSS 居中技術,老外碼農爭相寫相關的文章,一篇賽一篇的長啊,我把幾篇歸納總結了一下,算是筆記。 孔乙己曾說:“茴香豆的回字有四種寫法”,萬一哪天有個面試官問你:“居中一共有幾種寫法”呢,哈哈,先備著吧~~ 各種方法各有利弊,大家自己權衡吧,至少在需要居中時多個思路。
<center>
不建議用了。
text-align:center
在父容器裡水平居中 inline 文字,或 inline 元素
vertical-align:middle
垂直居中 inline 文字,inline 元素,配合 display:table
,display:table-cell
,有奇效。
line-height
與 height 聯手,垂直居中文字
margin:auto
示例:
1 2 3 4 5
<style> #ex2_container { width:200px; background-color:yellow; } #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; } </style> <div id="ex2_container"><div id="ex2_content">Hello World</div></div>
hacks, hacks(小技巧)
有許多 hacks ,負 margin,影子元素 ::before 等。如果你的內容不是固定大小的話,它們大部分是很脆弱的。
translate(-50%,-50%)
用 position 加 translate translate(-50%,-50%) 比較奇特,百分比計算不是以父元素為基准,而是以自己為基准。
參考文章:居中百分比寬高的元素
示例:
1 2 3 4 5
<style> #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; } #ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; } </style> <div id="ex3_container"><div id="ex3_content">Hello World</div></div>
這個技巧相當囂張,同樣適用於沒固定大小的內容,min-width
,max-height
,overflow:scroll
等。
絕對定位居中
父容器元素:position: relative
1 2 3 4 5 6 7 8
.Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
注意:高度必須定義,建議加 overflow: auto
,防止內容溢出。
視口居中
內容元素:position: fixed
,z-index: 999
,記住父容器元素 position: relative
1 2 3 4 5 6 7 8 9
.Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; }
模態窗口實例
響應式
百分比寬高,最大、最小寬度均可以,加 padding 也可以
1 2 3 4 5 6 7 8 9 10 11
.Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
偏移
只要 margin: auto;
在,內容塊將垂直居中,top, left, bottom, right 可以設置偏移。
1 2 3 4 5 6 7 8 9
.Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px; text-align: right; }
溢出
居中內容比父容器高時,防止溢出,加 overflow: auto
(沒有任何 padding 時,也可以加 max-height: 100%;
)。
1 2 3 4 5 6 7 8 9
.Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
調整尺寸
resize 屬性可以讓尺寸可調。 設置 min- /max- 限制尺寸,確定加了 overflow: auto
。
1 2 3 4 5 6 7 8 9 10 11
.Absolute-Center.is-Resizable { min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
圖像
圖像同樣適用,設置 height: auto;
1 2 3 4 5 6 7
.Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
可變高度
高度必須定義,但可以是百分比或 max-height。不想定義高度的話,用 display: table
(需要考慮 Table-Cell 兼容性)。
1 2 3 4 5 6 7 8
.Absolute-Center.is-Variable { display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
負 margin
確切知道寬高,負 margin 是寬和高的一半。
1 2 3 4 5 6 7 8 9
.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ }
Table-Cell
參考文章:Flexible height vertical centering with CSS, beyond IE7
結構:
1 2 3 4 5 6 7
<div class="Pos-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> <!-- CONTENT --> </div> </div> </div>
樣式:
1 2 3 4 5 6 7 8 9
.Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }
FlexBox
參考文章:Designing CSS Layouts With Flexbox Is As Easy As PIE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
.Pos-Container.is-Flexbox { 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; }
參考資料: * Absolute Horizontal And Vertical Centering In CSS * Absolute Centering in CSS * CENTERING ALL THE DIRECTIONS * Seven Ways of Centering With CSS * How to Center Anything With CSS * Vertical Centering With CSS