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


126

我的页面上有一个按钮,单击该按钮时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即使在页面滚动时也如何在屏幕中间显示。


问题的问题。为什么要减去上边距:(200)和左边距。我觉得这是高度和宽度的媒介,但是为什么我们必须这样做才能获得绝对中心?难道剩下的50%和顶部的50%都能做到吗?
jmoon90'6

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

Answers:


189

position属性更改为fixed而不是absolute


2
如果您需要滚动弹出式div及其大于屏幕,该怎么办?
Darcbar '02

请记住,这不是响应速度最快的解决方案(而是针对上述问题的完美解决方案)。检查getbootstrap.com/javascript/#modals,并与您的DevTools一起查看有关使用弹出窗口/模式的一些不错的想法。
Cas Bloem)



6

我刚刚发现了一个新技巧,即使您没有固定尺寸,也可以将框居中放在屏幕中间。假设您想要一个60%宽/ 60%高的盒子。使它居中的方法是创建2个框:“容器”框,其左侧位置: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>


4

正确的方法是

.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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.