javascript - 股利未居中

<a href="javascript:;" onclick="$('#example').fadeIn('fast');">FadeIn!</a>

<div class="midbox" id="example" style="display:none;">
    Lorum ipsum<br>
    <br>
    [<a href="javascript:;" onclick="$('#example').fadeOut('fast');">Close</a>]
</div>

.midbox{
    display:block;
    position:absolute;
    top:50%;
    left:35%;
    padding: 8px;
}

我在Google和Stackoverflow上搜索了很多主题，但是似乎找不到答案。

我将midbox类放在body标签（</body>）末尾之前。现在，我单击此链接以淡入框，但该框未在中间显示，在没有页面提供的CSS的情况下仍显示在页面底部。

为什么这样做呢？你们能帮我吗？
谢谢。

最佳答案

干得好：

.midbox{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:600px;
    height:400px;
    margin-left:-300px;     /* half of width */
    margin-top:-200px;     /* half of height */
    padding: 8px;
}

DEMO