div 不居中
<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 标记末尾之前 ()。现在我点击这个链接淡入该框，但它没有显示在中间，它显示时没有我给它的 css 并显示在页面底部。
它为什么要这样做？你们能帮我吗？
谢谢。
<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;
}
I've searched through many topics on Google and here on Stackoverflow, but i can't seem to find my answer.
I put the midbox classes just before the end of the body tag (</body>). Now i click on this link to fade the box in, but it isn't showing up in the middle, it shows up without the css i gave it and at the bottom of the page.
Why is it doing this? Can you guys help me?
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
给你：
DEMO
Here you go:
DEMO
正如您在此示例中看到的，您的脚本正在运行。
请注意，您的 midbox 元素是绝对定位的，但绝对定位的元素是相对于位置不同于
static的第一个父元素相对定位的。此案例显示在此处。
请检查这是否不是您的情况。
希望这有帮助！
As you can see in this example, your script is working.
Note that your midbox element is positioned absolute, butabsolutely positioned elements are positioned relative to the first parent that has a position different than
static.This case is shown here.
Please check if this is not your case.
Hope this helps!
尝试将此代码放入 css
body, html{高度：100%；
宽度：100%；
}
Try putting this code in the css
body, html{height:100%;
width:100%;
}
将样式放在页面的头部：
或者更好地创建一个外部 css 文件并将其链接到 html 文件。
Put the styles in the head of the page:
or better create an external css file and link it to the html file.