1、在說到這個問題的時候，也許有人會問 CSS 中不是有 vertical-align 屬性來設置 垂直居中的嗎？即使是某些瀏覽器不支持我只需做少許的 CSS Hack 技術就可 以?。∷栽谶@里我還要啰嗦兩句， CSS 中的確是有 vertical-align 屬性，但是 它只對（X）HTML元素中擁有valign特性的元素才生效，例如表格元素中的、 、vcaption等，而像、這樣的元素是沒有 valign特性的，因 此使用 vertical-align 對它們不起作用。CSS 網(wǎng)頁布局 DIV 水平居中的各種方法一、單行垂直居中如果一個容器中只有一行文字， 對它實現(xiàn)居中相對比較簡單， 我們只

2、需要設置它 的實際高度 height 和所在行的高度 line-height 相等即可。如： （愛摩客）提供的代碼片段：div height:25px;line-height:25px;overflow:hidden; 這段代碼很簡單，后面使用 overflow:hidden 的設置是為了防止內容超出容器或 者產(chǎn)生自動換行，這樣就達不到垂直居中效果了。 （愛摩客）提供的代碼片段： 單行文字實現(xiàn)垂直居中 body font-size:12px;font-family:tahoma;div height:25px;line-height:25px;border:1px solid #FF0099;

3、background-color:#FFCCFF; 現(xiàn)在我們要使這段文字垂直居中顯示！ 不過在 Internet Explorer 6 及以下版本中，這和方法不支持對圖片設置垂直居中。二、多行未知高度文字的垂直居中如果一段內容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實現(xiàn)水平居 中時使用到的最后一種方法， 就是設定 Padding ，使上下的 padding 值相同即可。 同樣的，這也是一種 看起來”的垂直居中方式，它只不過是使文字把 完全 填充的一種方式而已?？梢允褂妙愃葡旅娴拇a： （愛摩客）提供的代碼片段：div padding:25px;這種方法的優(yōu)點就是它可以在任何瀏覽器上運行

4、， 并且代碼很簡單， 只不過這種 方法應用的前提就是容器的高度必須是可伸縮的。 （愛摩客）提供的代碼片段： 多行文字實現(xiàn)垂直居中 body font-size:12px;font-family:tahoma;div padding:25px;border:1px solid #FF0099;background-color:#FFCCFF;width:760px; 現(xiàn)在我們要使這段文字垂直居中顯示！div padding:25px;border:1px solid #FF0099;background-color:#FFCCFF;三、多行文本固定高度的居中在本文的一開始，我們已經(jīng)說過 CSS

5、中的 vertical-align 屬性只會對擁有 valign 特性的 (X)HTML 標簽起作用，但是在 CSS 中還有一個 display 屬性能夠模擬 ，所以我們可以使用這個屬性來讓 模擬就可以使用 vertical-align 了。注意， display:table 和 display:table-cell 的使用方法，前者必 須設置在父元素上， 后者必須設置在子元素上， 因此我們要為需要定位的文本再 增加一個元素： (愛摩客)提供的代碼片段：div#wrap height:400px;display:table;div#content vertical-align:middle;

6、display:table-cell;border:1px solid #FF0099;background-color:#FFCCFF;width:760px; （愛摩客）提供的代碼片段： 多行文字實現(xiàn)垂直居中 body font-size:12px;font-family:tahoma;div#wrap height:400px;display:table;div#content vertical-align:middle;display:table-cell;border:1px solid #FF0099;background-color:#FFCCFF;width:760px; 現(xiàn)在

7、我們要使這段文字垂直居中顯示！div#wrap height:400px;display:table;div#content vertical-align:middle;display:table-cell;border:1px solid #FF0099;background-color:#FFCCFF;width:760px;這個方法應該是很理想了， 但是不幸的是 Internet Explorer 6 并不能正確地理解 display:table 和 display:table-cell ，因此這種方法在 Internet Explorer 6 及以下 的版本中是無效的。嗯，這讓人很郁悶

8、！不過我們還其它的辦法。四、在 Internet Explorer 中的解決方案在 Internet Explorer 6 及以下版本中， 在高度的計算上存在著缺陷的。 在 Internet Explorer 6 中對父元素進行定位后，如果再對子元素進行百分比計算時，計算的 基礎似乎是有繼承性的 (如果定位的數(shù)值是絕對數(shù)值沒有這個問題， 但是使用百 分比計算的基礎將不再是該元素的高度， 而從父元素繼承來的定位高度) 。例如， 我們有下面這樣一個 (X)HTML 代碼段： （愛摩客）提供的代碼片段：如果我們對 subwrap 進行了絕對定位， 那么 content 也會繼承了這個屬性， 雖然 它

9、不會在頁面中馬上顯示出來，但是如果再對 content 進行相對定位的時候，你 使用的 100%分比將不再是 content 原有的高度。 例如，我們設定了 subwrap 的 position 為 40% ，我們如果想使 content 的上邊緣和 wrap 重合的話就必須設置 top:-80%; 那么，如果我們設定 subwrap 的 top:50% 的話，我們必須使用 100% 才能使 content 回到原來的位置上去， 但是如果我們把 content 也設置 50% 呢？ 那么它就正好垂直居中了。所以我們可以使用這中方法來實現(xiàn)Internet Explorer6 中的垂直居中： （愛

10、摩客）提供的代碼片段：div#wrap border:1px solid #FF0099; background-color:#FFCCFF; width:760px;height:400px; position:relative;div#subwrap position:absolute;border:1px solid #000;top:50%;div#content border:1px solid #000;position:relative;top:-50%;當然，這段代碼只能在 Internet Exlporer 6 等計算存在問題的瀏覽器中才會有作 用。（不過我不解，我查閱了很多

11、文章，不知道是因為出處相同還是什么原因， 似乎很多人都不愿意去解釋 Internet Exlporer 6 中這個 Bug 的原理，我也只是了 解了一點皮毛，還要再研究） （愛摩客）提供的代碼片段： 多行文字實現(xiàn)垂直居中 body font-size:12px;font-family:tahoma;div#wrap border:1px solid #FF0099;background-color:#FFCCFF;width:760px;height:400px;position:relative;div#subwrap position:absolute;top:50%;div#conten

12、t position:relative;top:-50%; 現(xiàn)在我們要使這段文字垂直居中顯示！ div#wrap border:1px solid #FF0099;background-color:#FFCCFF;width:760px;height:500px;position:relative;div#subwrap position:absolute;border:1px solid #000;top:50%;div#content border:1px solid #000; position:relative; top:-50%;五、完美的解決方案 那么我們綜合上面兩種方法就可以得到

13、一個完美的解決方案，不過這要用到CSS hack 的知識。對于如果使用 CSS Hack 來區(qū)分瀏覽器， 你可以參考這篇 “簡 單 CSS hack ：區(qū)分 IE6、IE7、IE8、Firefox 、Opera”： （愛摩客）提供的代碼片段：div#wrap display:table;border:1px solid #FF0099; background-color:#FFCCFF; width:760px;height:400px;_position:relative;overflow:hidden;div#subwrap vertical-align:middle;display:ta

14、ble-cell;_position:absolute;_top:50%;div#content _position:relative;_top:-50%; 至此，一個完美的居中方案就產(chǎn)生了 （愛摩客）提供的代碼片段： 多行文字實現(xiàn)垂直居中 body font-size:12px;font-family:tahoma;div#wrap display:table;border:1px solid #FF0099;background-color:#FFCCFF;width:760px;height:400px;_position:relative;overflow:hidden;div#subwrap vertical-align:middle;display:table-cell;_position:absolute;_top:50%;div#content _position:relative;_top:-50%; 現(xiàn)在我們要使這段文字垂直居中顯示！ div#wrap border:1px solid #FF0099;background-color:#FFCCFF;width:760px;heigh