以下共有五種方式
每種使用方式各有其優、缺點，端看自己要置中的內容是「區塊」或是「文字」來取捨。
方法1. 適用於單行文字 設定 容器line-height 跟 容器height 相同 ex: height:150px; line-height:150px;
方法2. 設定容器 display:table-cell; vertical-align:middle;
容器高度固定的話 4 5 6
方法4. display:absolute; height:400px; top:50%; margin-top:-200px;
方法5. 在需要被垂直置中的div前放置另一個div，設置為height:50%，margin-bottom:-contentHeight(目標高度的負值)
方法6. position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:300px; height:280px;
方法7. 利用行內元素撐開
方法8: 如果欲置中物件為圖片 乾脆就 {background:url(200x200.jpg) no-repeat center center;} 花哈哈 有點蠢
方法9: 寫程式
---------------------------------------------------------------------------------------------
方法1.
此方法適用於「單行」文字的垂直置中(EX:要作英文網站大Slogan時), container除了設置高度之外，同時也將行距(line-height)設置與高度相等。
Sample Code
HTML
<div id="content">一行文字要被置中</div>
CSS
#content { height:150px; line-height:150px; }
優點:
簡單
所有browser都支援(even IE6!)
即使內容溢出也不會被切掉
缺點:
只有單行文字適合
若div寬度固定，一當有長文字爆行時會很醜，務必小心使用。
---------------------------------------------------------------------------------------------
方法2
使用CSS table-cell屬性來完成
其中的 display:table-cell 是將自己模擬為<td>, 讓原本不存在vertical-align的div可以使用vertical-align
Sample Code
HTML
<div id="wrap">
<div id="cell">
<div id="content">
要被置中的內容
</div>
</div>
</div>
CSS
#wrap { display:table; }
#cell { display:table-cell; vertical-align:middle; }
優點:
因為是CSS2.1釋出的標準屬性，正規的解決方法。
被置中的內容增加後，垂直置中的block會自動調整。
缺點:
支援性不佳，IE8以上才支援(IE7以下不支援display:table語法)
太多巢狀標籤(有種回到過去table排版的fu)
---------------------------------------------------------------------------------------------
方法4
div設定為 position: absolute, 將其top設置為50%, 再設置與div高度一半的「負」值margin-top
也就是 先讓div的 原點y 對到外容器的中心點, 再利用負值的margin將他拉回高度的一半, 即會變成中心點對中心點
Sample Code
HTML
<div id="center">
要被置中的內容
</div>
CSS
#center {
display:absolute; height:400px; top:50%; margin-top:-200px; /* div高度的一半 */
}
優點:
程式碼簡短，且無需為了「垂直置中」的目的多寫巢狀標籤
所有browser都支援，泛用性高
缺點:
div高度需固定，若是動態資料有可能超過的話需要加上overflow:scroll讓溢出的內容可以看見
---------------------------------------------------------------------------------------------
方法5
在需要被垂直置中的div前放置另一個div，設置為height:50%，margin-bottom:-contentHeight(目標高度的負值)
Sample Code
HTML
<body>
<div id="floater"></div>
<div id="middle">
要被置中的div
</div>
</body>
CSS
html, body {
margin:0; padding:0; height:100%;
}
#floater { float:left; height:50%; margin-bottom:-200px;
width:1px; /* only for IE7 */
}
#middle { clear:both; height:400px; position:relative; }
優點:
所有browser都支援(Note:IE7必須在#floater追加width:1px才work!)
當內容增加時，垂直置中的div不會被切掉，而是會自動出現scroll-bar
缺點:
div高度需固定, 另外若置中物件的父層是body, 即使視窗被USER拖曳拉小了，div也一樣會唯持置中(笑)
---------------------------------------------------------------------------------------------
方法6
本法使用在同樣是絕對定位(absolute)的div上，固定高度，並定義top:0; bottom:0; 和廣為被應用的
{ margin:0 auto; }作div水平置中原理類似
Sample Code
HTML
<div id="middle">
我要被置中啦~
</div>
CSS
#middle {
position:absolute; width:70%; height:280px;
top:0; bottom:0; left:0; right:0; margin:auto;
}
優點:
簡單
缺點:
不支援IE7(含)以下
div高度需固定
如果容器不夠裝內文, 也不會有scrollbar自動出現...
---------------------------------------------------------------------------------------------
方法7
利用行內元素撐開, 欲置中物件 display 需為 inline 系列
HTML
<div>
<span></span>
<img src="200x200.jpg" />
</div>
CSS
div * {
vertical-align:middle;
}
span {
width:0; /*似乎可以不用*/height:100%; display:inline-block;
}
沒有留言:
張貼留言