当页面比屏幕大时如何将div定位在屏幕中间

您好，我正在使用类似于以下内容的方法来将 div 放置在屏幕中间：

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

然而，这样做的问题是它将项目放置在页面的中间而不是屏幕的中间。因此，如果页面有几个屏幕高，并且我位于页面顶部（该部分的顶部显示在屏幕上），那么当我使 div 出现时，它甚至不在屏幕上。您必须向下滚动才能查看它。

有人可以告诉我如何让它出现在屏幕中间吗？

只需添加position:fixed即使您向下滚动，它也会保持在视图中。看到它在http://jsfiddle.net/XEUbc/1/ http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}