即使将页面向上或向下滚动，也可以在屏幕中间居中放置一个“ div”？

问题描述

| 我的页面上有一个按钮，单击该按钮时，屏幕中间会显示一个“ 0”（弹出样式）。 我正在使用以下CSS将ѭ0居中在屏幕中间：

.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就可以正常工作。 但是，如果将按钮放在页面的底部，则单击该按钮时，将在顶部显示“ 0”，并且用户必须向上滚动才能查看“ 0”的内容。 我想知道如何在屏幕中间显示

div

，即使滚动页面也是如此。     

解决方法

        将“ 6”属性更改为“ 7”，而不是“ 8”。     ,        将

position:absolute;

更改为

position:fixed;

    ,           Quote：我想知道如何在中间显示div   屏幕上，用户是否向上/向下滚动。 更改

position: absolute;

至

position: fixed;

313 specifications和

position: fixed

的W3C规格。     ,        我只是发现了一个新技巧，即使您没有固定尺寸，也可以将框居中放在屏幕中间。假设您想要一个60％宽/ 60％高的盒子。使它居中的方法是创建2个框：一个“容器”框，其左侧位置：50％顶部：50％，以及一个“文本”框，其内部左侧位置：-50％；最高：-50％; 它可以工作，并且与跨浏览器兼容。 查看下面的代码，您可能会得到更好的解释：

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

<style type=\"text/css\">
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.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
</style>

<script type=\"text/javascript\">
jQuery(\'.close a,.bg\',\'#message\').on(\'click\',function(){
  jQuery(\'#message\').fadeOut();
  return false;
});
</script>

,        正确的方法是

.PopupPanel
{
    border: solid 1px black;
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: white;
    z-index: 100;
    height: 400px;
    margin-top: -200px;

    width: 600px;
    margin-left: -300px;
}