在屏幕中间居中显示“div”，即使页面向上或向下滚动也是如此？
在屏幕中间居中显示“div”，即使页面向上或向下滚动也是如此？
提问于 2011-06-14 02:20:19
我在我的页面上有一个按钮，当点击它时，会在我的屏幕中间显示一个div (弹出式样式)。
我使用下面的CSS将div居中显示在屏幕中间：
.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}只要页面没有向下滚动，这个CSS就可以很好地工作。
但是，如果我将按钮放在页面的底部，当单击它时，div将显示在顶部，用户必须向上滚动才能查看div的内容。
我想知道如何在屏幕中间显示div，即使页面已经滚动。
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-06-14 02:22:25
将position属性更改为fixed而不是absolute。
Stack Overflow用户
发布于 2011-06-14 02:23:07
将position:absolute;更改为position:fixed;
Stack Overflow用户
发布于 2013-11-10 14:47:48
我刚刚发现了一个新的技巧，即使你没有固定的尺寸，也可以在屏幕中间居中放置一个框。假设你想要一个60%宽/ 60%高的盒子。使其居中的方法是通过创建两个框:一个“容器”框，位置左侧: 50%顶部:50%，和一个“文本”框内部，反转位置左侧:-50%；顶部：-50%；
它可以工作，并且是跨浏览器兼容的。
看看下面的代码，你可能会得到更好的解释：
jQuery('.close a, .bg', '#message').on('click', function() {
jQuery('#message').fadeOut();
return false;
});html, body {
min-height: 100%;
}
#message {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#message .container {
height: 60%;
left: 50%;
position: absolute;
top: 50%;
z-index: 10;
width: 60%;
}
#message .container .text {
background: #fff;
height: 100%;
left: -50%;
position: absolute;
top: -50%;
width: 100%;
}
#message .bg {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="message">
<div class="container">
<div class="text">
<h2>Warning</h2>
<p>The message</p>
<p class="close"><a href="#">Close Window</a></p>
</div>
</div>
<div class="bg"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6334495
复制相关文章
相似问题
腾讯云开发者
