先膜拜一下鏈結裡的人。。
1.這個方法把一些 div 的顯示方式設定為**,因此我們可以使用**的 vertical-align property 屬性。
<divid
=<divid
="cell">
<divclass
="content">
content goes herediv>
div>
div>
#cell
2.這個方法使用絕對定位的 div,把它的 top 設定為 50%,top margin 設定為負的 content 高度。這意味著物件必須在 css 中指定固定的高度。
因為有固定高度,或許你想給 content 指定 overflow:auto,這樣如果 content 太多的話,就會出現滾動條,以免content 溢位。
<divclass
="content">
content goes herediv>
#content
3.
這種方法,在 content 元素外插入乙個 div。設定此 div height:50%; margin-bottom:-contentheight;。
content 清除浮動,並顯示在中間。
<divid
="floater">div>
<divid
="content">
content here
div>
#floater
#content
4.
這個方法使用了乙個 position:absolute,有固定寬度和高度的 div。這個 div 被設定為 top:0; bottom:0;。但是因為它有固定高度,其實並不能和上下都間距為 0,因此 margin:auto; 會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的。
<divid
="content">
content herediv>
#content
5.這個方法只能將單行文字置中。只需要簡單地把 line-height 設定為那個物件的 height 值就可以使文字居中了。
<divid
="content">
content herediv>
#content
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中,是將要水平排列的塊狀元素設為display inline block,然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中,意思是上下距離為0,auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
css 垂直居中
只考慮單行是簡單的,無論是否給容器固定高度,只要給容器設定line height和height,並且兩指相等,再加上over flow hidden.單行文字垂直居中,line height wrap2 優點 1.同時支援塊級元素和內聯元素 2.支援所有瀏覽器 缺點 1.只能顯示一行 2.ie中不支...