html中div垂直居中

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

一、行高（line-height）法

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

這段**可以達到讓文字在段落中垂直居中的效果。

二、內邊距（padding）法

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

這段**的效果和line-height法差不多。

三、模擬**法

模擬**法其實就是用css中對元素的宣告讓塊元素像**一樣顯示，用到的css屬性有display、vertical-align等。先看下面的html**：

<
divid
="box"
>
<
divid
="content"
>
居中顯示
div>
div>

參照以上html**，讓最外面名為box的div呈**樣式顯示，然後再讓box中名為content的div呈單元格顯示，並利用vertical-align:middle讓其垂直居中，這樣就模擬出來和**一樣的顯示方式，css**如下：

#wrap  #content

但這種方法有乙個弊端，由於ie瀏覽器對高度理解會產生錯誤，所以這種方法僅對firefox有效，對ie無效，既然這樣，我們就需要找出對ie的修正方法，於是有了另外一種方法。

四、定位法

顧名思義，定位法是利用css定位屬性position對元素進行定位的方法，也屬於模擬方法，不過它對ie的支援還是不錯的。它的html**為：

<
divid
="box"
>
<
divid
="sub"
>
<
divid
="content"
>
垂直居中
div>
div>
div>

這段**比上一種方法中多出了乙個名為sub的div，它的作用是用來定位，原理就是：首先讓box出於相對定位，sub相對box出於相對定位，位於box垂直方向的50%，再讓content中的真正內容出於sub垂直方向的-50%，從而製作出content在box中垂直居中的效果，它們的css**如下：

#wrap  #subwrap  #content

這段**無論是在ie中還是firefox中，都能正常居中了