HTML/CSS控制div垂直&&水平居中屏幕

这个示例是使用HTML/CSS实现的，对于一个给定宽高的元素，不管有没拖动滚动条，让它始终处于屏幕水平方向和垂直方向居中的位置。

CSS:

<style>
    html,body{ height:100%; overflow:hidden;}
    body{ overflow:auto}
    .test{width:500px; height:500px; position:absolute; left:25%;  top:25%;  background-color:#000;}
    h1{ height:1500px;/*测试滚动条*/} 
</style>

 

HTML:

<body>
    <div class="test"></div>
    <h1>ph</h1>
</div>

示例分析：

    考虑到fixed IE6不支持，所以采用的是绝对定位。对于使用了绝对定位(position:absolute;)的元素，它的位置属性（top/left/bottom/right）的值，默认情况下是根据文档 的根元素<html>进行偏移定位， 如果它的上层元素（祖先元素或父元素）的position值不等于static时，则top/left/bottom/right 根据该元素进行偏移定位。上面的示例中 .test 中top:25%; 表示.test的top值为根元素<html>高度的25%；

    当html,body的高度为百分比时，<body>的高度根据父元素<html>来计算，<html>的高度根据可视窗口的高度度来计算，所以在上面的示例中 html,body{ height:100%; overflow:hidden;} 表示<html>、<body>的高度为整个内容可视窗口的高度，并且内容超出一屏时隐藏滚动条，而下面又使用了 body{ overflow:auto} 使得内容超出一屏幕时<body>的滚动条能够显示。所以当拖到滚动条时滚动是body的内容，而基于html进行绝对定位的.test,不会随滚动条滚动始终处于屏幕中间。

posted @ 2011-11-02 12:49  rentj  阅读(4272)  评论(2)  编辑  收藏  举报