方法三
這種方法,在content元素外插入一個div。設置此divheight:50%;margin-bottom:-contentheight;。
content清除浮動,並顯示在中間。
- <dividdivid="floater">
- <dividdivid="content">
- Contenthere< span>div>
- < span>div>
- #floater{float:left;height:50%;margin-bottom:-120px;}
- #content{clear:both;height:240px;position:relative;}
優點:
適用於所有浏覽器
沒有足夠空間時(例如:窗口縮小)content不會被截斷,滾動條出現
缺點:
唯一我能想到的就是需要額外的空元素了(也沒那麼糟,又是另外一個話題)
方法四
這個方法使用了一個position:absolute,有固定寬度和高度的div。這個div被設置為top:0;bottom:0;。但是因為它有固定高度,其實並不能和上下都間距為0,因此margin:auto;會使它居中。使用margin:auto;使塊級元素垂直居中是很簡單的。
- <dividdivid="content">
- Contenthere< span>div>
- #content{
- position:absolute;
- top:0;
- bottom:0;
- left:0;
- right:0;
- margin:auto;
- height:240px;
- width:70%;
- }
優點:簡單
缺點:
IE(IE8beta)中無效
無足夠空間時,content被截斷,但是不會有滾動條出現
方法五
這個方法只能將單行文本置中。只需要簡單地把line-height設置為那個對象的height值就可以使文本居中了。
- <dividdivid="content">
- Contenthere< span>div>
- #content{height:100px;line-height:100px;}
優點:
適用於所有浏覽器
無足夠空間時不會被截斷
缺點:
只對文本有效(塊級元素無效)
多行時,斷詞比較糟糕
這個方法在小元素上非常有用,例如使按鈕文本或者單行文本居中。