首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在屏幕中间居中显示“div”,即使页面向上或向下滚动也是如此?

在屏幕中间居中显示“div”,即使页面向上或向下滚动也是如此?
EN

Stack Overflow用户
提问于 2011-06-14 02:20:19
回答 4查看 188.7K关注 0票数 130

我在我的页面上有一个按钮,当点击它时,会在我的屏幕中间显示一个div (弹出式样式)。

我使用下面的CSS将div居中显示在屏幕中间:

代码语言:javascript
复制
.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,即使页面已经滚动。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-06-14 02:22:25

position属性更改为fixed而不是absolute

票数 197
EN

Stack Overflow用户

发布于 2011-06-14 02:23:07

position:absolute;更改为position:fixed;

票数 31
EN

Stack Overflow用户

发布于 2013-11-10 14:47:48

我刚刚发现了一个新的技巧,即使你没有固定的尺寸,也可以在屏幕中间居中放置一个框。假设你想要一个60%宽/ 60%高的盒子。使其居中的方法是通过创建两个框:一个“容器”框,位置左侧: 50%顶部:50%,和一个“文本”框内部,反转位置左侧:-50%;顶部:-50%;

它可以工作,并且是跨浏览器兼容的。

看看下面的代码,你可能会得到更好的解释:

代码语言:javascript
复制
jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});
代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6334495

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档