如何在页面滚动时将“div”居中显示于屏幕中央？

Question

我的页面中有一个按钮，当点击它时会在屏幕中央显示一个 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显示在屏幕中央。

- tanya

---

问题问题。为什么要减去margin-top: (200)和margin-left？我感觉这是高度和宽度的中间值，但为什么我们要这样做才能得到绝对居中？左边50%和顶部50%不应该就可以了吗？ - jmoon90

@jmoon90 left: 50%; top: 50% 将 .PopupPanel 的 左上角 移动到屏幕中心。然后我们将其宽度和高度的一半移回中心以使其居中。请参阅 css-tricks.com 上的居中指南。 - kub1x

Answer 1

将 position 属性从 absolute 更改为 fixed。

- BraedenP

---

如果弹出的 div 比屏幕大，需要滚动怎么办？ - Darcbar

请注意，这不是最响应的解决方案（但对于上述问题来说是完美的解决方案）。请查看http://getbootstrap.com/javascript/#modals，并使用您的DevTools获取有关处理弹出窗口/模态框的一些好点子。 - Cas Bloem

Answer 2

将position:absolute;更改为position:fixed;

- Richard JP Le Guen

Answer 3

引用: 我想知道如何在用户向上/向下滚动时将div显示在屏幕中央。

更改

position: absolute;

到

position: fixed;

---

W3C规范关于position: absolute和position: fixed。

- Sparky

Answer 4

这里是如何让一个框在屏幕中间居中，即使您没有固定的尺寸。假设您想要一个60%宽度/ 60%高度的框。让它居中的方法是创建两个框：一个“容器”框，位置为左：50％，顶部：50％，以及内部带有相反位置的“文本”框左侧：-50％; 顶部：-50％;

它可以正常工作，并且与各种浏览器兼容。

请查看下面的代码，您可能会得到更好的解释：

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

<div id="message">
  <div class="container">
    <div class="text">
      <h2>Warning</h2>
      <p>The message</p>
    </div>
  </div>
  <div class="bg"></div>
</div>

- SequenceDigitale.com

Answer 5

正确的方法是

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

- Sakthi Karthik