[轉]如何讓div中的內容垂直置中

標籤：

轉自：http://blog.163.com/yan_1990/blog/static/197805107201211311515454/

 

雖然Div布局已經基本上取代了表格版面配置，但表格版面配置和Div布局仍然各有千秋，互有長處。比如表格版面配置中的垂直置中就是Div布局的一大弱項，不過好在千變萬化的CSS可以靈活運用，可以製作出准垂直置中效果，勉強過關。 要讓div中的內容垂直置中，無非有以下幾種方法，等我一一列舉：

一、行高（line-height）法
如果要垂直置中的只有一行或幾個文字，那它的製作最為簡單，只要讓文字的行高和容器的高度相同即可，比如：

p { height:30px; line-height:30px; width:100px; overflow:hidden; }
這段代碼可以達到讓文字在段落中垂直置中的效果。

二、內邊距（padding）法
另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直置中，原理就是利用padding將內容垂直置中，比如：

p { padding:30px; }
這段代碼的效果和line-height法差不多。

三、類比表格法
類比表格法其實就是用CSS中對元素的聲明讓塊元素像表格一樣顯示，用到的CSS屬性有display、vertical-align等。 先看下面的Html代碼：

<div id="box"> <div id="content">置中顯示</div> </div>
參照以上Html代碼，讓最外面名為box的Div呈表格樣式顯示，然後再讓box中名為content的Div呈儲存格顯示，並利用vertical-align:middle讓其垂直置中，這樣就類比出來和表格一樣的顯示方式，CSS代碼如下：

#wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background:#000; width:400px; }
但這種方法有一個弊端，由於IE瀏覽器對高度理解會產生錯誤，所以這種方法僅對Firefox有效，對IE無效，既然這樣，我們就需要找出對IE的修正方法，於是有了另外一種方法。

四、定位法
顧名思義，定位法是利用CSS定位屬性position對元素進行定位的方法，也屬於類比方法，不過它對IE的支援還是不錯的。 它的Html代碼為：

<div id="box"> <div id="sub"> <div id="content">垂直置中</div> </div> </div>
這段代碼比上一種方法中多出了一個名為sub的Div，它的作用是用來定位，原理就是：首先讓box出於相對定位，sub相對box出於相對定位，位於box垂直方向的50%，再讓content中的真正內容出於sub垂直方向的-50%，從而製作出content在box中垂直置中的效果，它們的CSS代碼如下：

#wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #subwrap { position:absolute; top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }
這段代碼無論是在IE中還是Firefox中，都能正常置中了

[轉]如何讓div中的內容垂直置中