方法一

這個(gè)方法把一些?div?的顯示方式設(shè)置為表格，因此我們可以使用表格的?vertical-alignproperty 屬性。

<div id="wrapper"> <div id="cell"><div class="content">Content goes here</div></div></div>

#wrapper {display: table; }#cell {display: table-cell;vertical-align: middle; }

優(yōu)點(diǎn)：

• content?可以動(dòng)態(tài)改變高度(不需在 CSS 中定義)。

• 當(dāng)?wrapper?里沒(méi)有足夠空間時(shí)，?content?不會(huì)被截?cái)?/p>

缺點(diǎn)：

• Internet Explorer(甚至 IE8 beta)中無(wú)效，許多嵌套標(biāo)簽(其實(shí)沒(méi)那么糟糕，另一個(gè)專題)

方法二：

這個(gè)方法使用絕對(duì)定位的?div，把它的?top?設(shè)置為?50％，top?margin?設(shè)置為負(fù)的?content?高度。這意味著對(duì)象必須在 CSS 中指定固定的高度。

因?yàn)橛泄潭ǜ叨?#xff0c;或許你想給?content?指定?overflow:auto，這樣如果?content?太多的話，就會(huì)出現(xiàn)滾動(dòng)條，以免content?溢出。

<div class="content"> Content goes here</div> #content {position: absolute;top: 50%;height: 240px;margin-top: -120px; /* negative half of the height */}

優(yōu)點(diǎn)：

• 適用于所有瀏覽器

• 不需要嵌套標(biāo)簽

缺點(diǎn)：

• 沒(méi)有足夠空間時(shí)，content?會(huì)消失(類似div?在?body?內(nèi)，當(dāng)用戶縮小瀏覽器窗口，滾動(dòng)條不出現(xiàn)的情況)

方法三

這種方法，在 content 元素外插入一個(gè) div。設(shè)置此?div?height:50%; margin-bottom:-contentheight;。?
content 清除浮動(dòng)，并顯示在中間。

<div id="floater"> <div id="content">Content here</div></div>

#floater {

? ?float: left;height: 50%;margin-bottom: -120px; }#content {clear: both;height: 240px;position: relative; }

優(yōu)點(diǎn)：

• 適用于所有瀏覽器

• 沒(méi)有足夠空間時(shí)(例如：窗口縮小)?content?不會(huì)被截?cái)?#xff0c;滾動(dòng)條出現(xiàn)

缺點(diǎn)：

• 唯一我能想到的就是需要額外的空元素了(也沒(méi)那么糟，又是另外一個(gè)話題)

方法四

這個(gè)方法使用了一個(gè)?position:absolute，有固定寬度和高度的?div。這個(gè)?div?被設(shè)置為?top:0; bottom:0;。但是因?yàn)樗泄潭ǜ叨?#xff0c;其實(shí)并不能和上下都間距為 0，因此?margin:auto;會(huì)使它居中。使用?margin:auto;使塊級(jí)元素垂直居中是很簡(jiǎn)單的。

<div id="content"> Content here</div>

#content {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 240px;width: 70%; }

優(yōu)點(diǎn)：

• 簡(jiǎn)單

缺點(diǎn)：

• IE(IE8 beta)中無(wú)效

• 無(wú)足夠空間時(shí)，content?被截?cái)?#xff0c;但是不會(huì)有滾動(dòng)條出現(xiàn)

方法五

這個(gè)方法只能將單行文本置中。只需要簡(jiǎn)單地把?line-height?設(shè)置為那個(gè)對(duì)象的?height?值就可以使文本居中了。

<div id="content"> Content here</div> #content {height: 100px;line-height: 100px; }

優(yōu)點(diǎn)：

• 適用于所有瀏覽器

• 無(wú)足夠空間時(shí)不會(huì)被截?cái)?/p>

缺點(diǎn)：

• 只對(duì)文本有效(塊級(jí)元素?zé)o效)

• 多行時(shí)，斷詞比較糟糕

這個(gè)方法在小元素上非常有用，例如使按鈕文本或者單行文本居中。

總結(jié)

以上是生活随笔為你收集整理的CSS实现垂直居中的5种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。