[解決済み] ページが画面より大きいとき、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/

#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;
}