原文地址

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

CSS:

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

HTML:

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


示例分析：

    对于绝对定位(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,不会随滚动条滚动始终处于屏幕中间。