javascript - Div 不居中

Question

<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 上搜索了很多主题，但似乎找不到我的答案。

我将中间框类放在正文标记 ( </body>) 的末尾之前。现在我单击此链接使框淡入，但它没有出现在中间，它没有我给它的 css 出现在页面底部。

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

Answer 1

给你:

.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