div+css设置div模块页面居中,兼容ie6+、ff3.0+、chrome

想得到如下的页面效果,例如用于遮罩层的位置控制:

image

页面代码:

<div class="divOuter">
    <div class="divInner">
        divInner为上图页面内居中显示的块
    </div>
</div>
尝试了多次,最后采用如下方案(不兼容ie5.5):
.divOuter  
{
    position:relative;
    margin:0 auto;  /* ie5.5 不支持 */    
    margin-top:25%; /* 设为25%时,距离上边距为页面高度的一半,不太理解,chrom、ff、ie6均如此 */
    width:300px; 
    height:200px;
}

.divInner  
{ 
    position:absolute; top:-50%;
    width:300px;
    height:200px; 
    background:#dedede;
}

 

 

 

posted on 2010-04-02 17:41  lihua好心情  阅读(590)  评论(0编辑  收藏  举报