DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁制作技巧總結:CSS居中大全代碼
網頁制作技巧總結:CSS居中大全代碼
編輯:CSS詳解     
文章簡介:CSS 居中大全

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

<center>

不建議用了。

text-align:center

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

vertical-align:middle

垂直居中 inline 文字,inline 元素,配合 display:tabledisplay: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-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; } 

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved