§ ITPOW >> 文档 >> CSS

如何做兼容各浏览器的垂直居中-div 在窗口中

作者:vkvi 来源:ITPOW(原创) 日期:2009-5-18

以前,我们在 IE 中,可以在外面套一个 100% width、100% height 的表格,然后将单元格设置成 valign="middle",就实现了垂直居中了。可是自从其他浏览器出来后,我们发现标准并不是那么回事。

原因是:如果没有指定高度,那么它的高度就是 0(除非有内容将其撑大),没有为 body 指定 height,那么它的值就是 0,那么表格的 100% height 就相当于 0 了。

解决办法

#loginPanel
{
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0px 0px -200px;
    width:400px;
    height:300px;
    background-color:#FFFFFF;
    color:#000000;
}

position、top、left 实现 loginPanel 的左上角顶点居中,而 margin-top、margin-left 是根据 height、width 除以 2 得出来的,目的是让 loginPanel 的中间在窗口的中间。

在 IE、Firefox 中测试通过。


相关文章