一、div+css文字垂直居中
在說到這個問題的時候，也許有人會問css中不是有vertical-align屬性來設定垂直居中的嗎？即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊！所以在這裡我還要囉嗦兩句，css中的確是有vertical-align屬性，但是它只對(x)html元素中擁有valign特性的元素才生效，例如**元素中的、、等，而像、這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。
css網頁布局div水平居中的各種方法
1、單行垂直居中
如果乙個容器中只有一行文字，對它實現居中相對比較簡單，我們只需要設定它的實際高度height和所在行的高度line-height相等即可。如：
div例：
現在我們要使這段文字垂直居中顯示！
如果一段內容，它的高度是可變的那麼我們就可以使用上一節講到的實現水平居中時使用到的最後一種方法，就是設定padding，使上下的padding值相同即可。同樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把完全填充的一種方式而已。可以使用類似下面的**：
divdiv
html
現在我們要使這段文字垂直居中顯示！
div
3、多行文字固定高度的居中
在本文的一開始，我們已經說過css中的vertical-align屬性只會對擁有valign特性的(x)html標籤起作用，但是在css中還有乙個display屬性能夠模擬，所以我們可以使用這個屬性來讓模擬就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設定在父元素上，後者必須設定在子元素上，因此我們要為需要定位的文字再增加乙個元素：
div#wrap
div#content
html
現在我們要使這段文字垂直居中顯示！
div#wrap
div#content
這個方法應該是很理想了，但是不幸的是internet explorer 6 並不能正確地理解display:table和display:table-cell，因此這種方法在internet explorer 6及以下的版本中是無效的。嗯，這讓人很鬱悶！不過我們還其它的辦法。
4、完美的解決方案
那麼我們綜合上面兩種方法就可以得到乙個完美的解決方案，不過這要用到css hack的知識。對於如果使用css hack來區分瀏覽器，你可以參考這篇「簡單css hack：區分ie6、ie7、ie8、firefox、opera」：
div#wrap
div#subwrap
div#content
現在我們要使這段文字垂直居中顯示！
div#wrap
div#subwrap
div#content
p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，雖然同是居中但關鍵字不同。
5、css vertical-align 屬性
vertical-align 屬性設定元素的垂直對齊方式 object
.style.verticalalign="bottom"
所有瀏覽器都支援 vertical-align 屬性。
注釋：任何的版本的 internet explorer （包括 ie8）都不支援屬性值 "inherit"。 值
描述baseline
預設。元素放置在父元素的基線上。
sub垂直對齊文字的下標。
super
垂直對齊文字的上標
top把元素的頂端與行中最高元素的頂端對齊
text-top
把元素的頂端與父元素字型的頂端對齊
middle
把此元素放置在父元素的中部。
bottom
把元素的頂端與行中最低的元素的頂端對齊。
text-bottom
把元素的底端與父元素字型的底端對齊。
length
%使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit
規定應該從父元素繼承 vertical-align 屬性的值。
例
這是一幅這是一幅
網頁布局基礎筆記1 DIV CSS
div css 1.css的三種位置 1.內嵌樣式表 inline css 即使用style標籤直接在html元素中建立樣式,如內嵌樣式 2.使用style元素定義css樣式,再用class 呼叫所定義的樣式.內部樣式表 internal css 常在head中 如 定義樣式 呼叫樣式 第一段 3....
css中常用的屬性（1）
padding 10px 上右下左邊距均為10px padding 10px 20px 表示上下內邊距10px 左右邊距20px padding 10px 20px 30px 表示上邊距10px 右邊距20px 下邊距30px 左邊距同右 padding 10px 20px 30px 40px 按照...
CSS樣式案例 1 文字的排版
本篇介紹的是小窗文字內容的排版，通過該篇文章可以讓小夥伴們熟悉以下幾個知識點 word space overflow text overflow。最終的展示效果如下 參考步驟 1.建立html文件，並使用dl,dt,dd元素將內容放進去。doctype html html head meta cha...