CSS中怎么讓div垂直居中？動(dòng)力節(jié)點(diǎn)小編來(lái)告訴大家。

方法一：

這個(gè)方法把 div 的顯示方式設(shè)置為表格，然后我們可以使用表格的 vertical-align property 屬性。

HTML & CSS:

 <div class="wrapper">  
     <div class="cell">
         <div class="content">
         　　<h1>把div顯示方式設(shè)置為表格</h1>
         </div>
     </div>
 </div> 

 .wrapper {display:table;background: #FC172E;width: 30%;height: 600px;} 
 .cell {
     display:table-cell; 
     vertical-align:middle;
 }

運(yùn)行效果：

優(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ú)效

方法二：

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

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

HTML & CSS:

 <div class="content">
   對(duì)定位的 div，把它的 top 設(shè)置為 50％，top margin 設(shè)置為負(fù)的 content 高度。這意味著對(duì)象必須在 CSS 中指定固定的高度。
 </div>

 .content {
     background: #272822;
     position:absolute; 
     top:50%; height:440px;width: 500px; 
     margin-top:-220px; /* 為高度的一半 */
 }

運(yùn)行效果：

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

適用于所有瀏覽器

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

缺點(diǎn)：

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

方法三：

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

HTML:

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

CSS:

 .content {
     position:absolute; 
     top:0; 
     bottom:0; 
     left:0; 
     right:0; 
     margin:auto; 
     height:440px; 
     width:70%; 
     background: #346FCE;
 }

運(yùn)行效果：

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

簡(jiǎn)單

缺點(diǎn)：

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

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

方法四：

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

HTML:

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

CSS:

 #content {
     margin: 50px auto;
     height:300px; 
     line-height:300px;
     background: #EAA527;
 }

運(yùn)行結(jié)果：

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

適用于所有瀏覽器

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

缺點(diǎn)：

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

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

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

方法五：

這種方法，在 content 元素外插入一個(gè) div。設(shè)置此 div height:50%; margin-bottom:-contentheight;。

content 清除浮動(dòng)，并顯示在中間。

HTML:

 <div class="content">
       在 content 元素外插入一個(gè) div。設(shè)置此 div height:50%; margin-bottom:-contentheight; content 清除浮動(dòng)，并顯示在中間。
 </div>

CSS:

 .floater {
     float:left; 
     height:50%; 
     position:relative;
     margin-top:-250px;
 }
 .content {
     clear:both; 
     height:500px; 
     background: #67930F;
     position:relative;
 }

運(yùn)行效果：

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

適用于所有瀏覽器

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

缺點(diǎn)：

唯一能想到的就是需要額外的空元素