网站设计中css解决未知高度的div垂直居中

wumei2009-10-29 13:39:09

尽管有CSS 的 vertical-align 特性,但是并不能有效解决未知高度的垂直居中问题(在一个 DIV 标签里有未知高度的文本或图片的情况下)。

标准浏览器如 Mozilla, Opera, Safari 等.,可将父级元素显示方式设定为 TABLE(display: table;) ,内部子元素定为 table-cell (display: table-cell),通过 vertical-align 特性使其垂直居中,但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部 50% ,里面再套个元素距顶部 -50% 来抵消。

CSS部分:

body {
        padding
:0;
        margin
:0;
}

body
,html{
        height
:100%;
}

#outer {
        height
:100%;
        overflow
: hidden;
        position
: relative;
        width
:100%;
        background
:ivory;
}

#outer[id] {
        display
: table;
        position
:static;
}

#middle {
        position
: absolute;
        top
:50%;
}/* for explorer only*/

#middle[id] {
        display
: table-cell;
        vertical
-align: middle;
        position
:static;
}

#inner {
        position
: relative;
        top
:-50%;
        width
:400px;
        margin
:0 auto;
}/* for explorer only */

div
.greenBorder {
        border
:1px solid green;
        background
-color: ivory;
}

xhtml部分:

<div id="outer">
       
<div id="middle">
               
<div id="inner"class="greenBorder"></div>
       
</div>
</div>

以上 CSS 代码的优点是没有 hacks,采用了 IE 不支持的 CSS2 选择器 #value[id] 。

CSS2选择器 #value[id] 相当于选择器 #value ,但是 Internet Explorer 不支持这种类型的选择器。同样地 .value[class] ,相当于 .value ,这些只有标准浏览器能读懂。

测试:Firefox1.5、Opera9.0、IE6.0、IE5.0通过。

any text
any height
any content, for example generated from DB
everything is vertically centered

上一篇:css布局中的居中
下一篇:css未知尺寸的图片的水平和垂直居中

有什么想说的吗?