CSS 居中大全【轉】

我看最近微博流行 CSS 居中技術,老外碼農爭相寫相關的文章,一篇賽一篇的長啊,我把幾篇概括總結了一下,算是筆記。 
孔乙己曾說:「茴香豆的回字有四種寫法」,萬一哪天有個面試官問你:「居中一共有幾種寫法」呢,哈哈,先備着吧~~ 
各類方法各有利弊,你們本身權衡吧,至少在須要居中時多個思路。css

<center>

不建議用了。html

text-align:center

在父容器裏水平居中 inline 文字,或 inline 元素html5

vertical-align:middle

垂直居中 inline 文字,inline 元素,配合 display:table ,display:table-cell,有奇效。git

line-height

與 height 聯手,垂直居中文字github

margin:auto

示例:web

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%) 比較奇特,百分比計算不是以父元素爲基準,而是以本身爲基準。flex

參考文章:居中百分比寬高的元素flexbox

示例:spa

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-widthmax-heightoverflow: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: fixedz-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">  &lt!-- 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; } 

 

轉至:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/

參考資料: 
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

相關文章
相關標籤/搜索