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

我在谷歌和Stackoverflow上搜索过很多主题，但我似乎无法找到答案。

我将midbox类放在body标记（</body>）的末尾。现在我点击此链接淡入框中，但它没有显示在中间，它显示没有我给它的CSS和页面的底部。

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

Answer 1

正如您在this example中看到的那样，您的脚本正在运行请注意，您的midbox元素位于绝对位置，但绝对定位的元素位于 relative 位置与位置不同于static的第一个父级。
此案例显示为here 请检查这不是你的情况。
希望这有帮助！

Answer 2

你走了：

.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

Answer 3

尝试将此代码放入css

body, html{ height:100%; width:100%; }

Answer 4

将样式放在页面的顶部：

<head>
<style type="text/css">
    <!--Your styles here-->
   .midbox{
     display:block;
     position:absolute;
     top:50%;
     left:35%;
     padding: 8px;
   }

</style>
</head>

或者更好地创建外部css文件并将其链接到html文件。

<link rel="stylesheet" type="text/css" href="path/to/your.css">

Div不居中

4 个答案:

DEMO