在屏幕中间的中心div - 即使当页面向上/向下滚动时

问题描述：

我在页面中有一个按钮，当点击时在屏幕中间显示div（弹出样式）。在屏幕中间的中心div - 即使当页面向上/向下滚动时

我正在使用下面的CSS中心在屏幕中间的股利。

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

它只要页面没有向下滚动工作正常..

但是，如果我把按钮在我的页面的底部，点击它，在顶部显示的DIV（用户必须向上滚动才能查看div的内容）。

我想知道如何在屏幕中间显示div，无论用户是否向上/向下滚动。

问题的问题。你为什么要减去margin-top：（200）和margin-left。我认为这是高度和宽度的中介，但为什么我们必须这样做才能获得绝对中心？左边的50％和顶端的50％不应该这样做吗？ – jmoon90 2016-06-06 00:07:36

@ jmoon90'left：50％;顶部：50％'将'.PopupPanel'的*左上角*移动到屏幕*。然后，我们将其宽度和高度的一半移回中心位置。请参阅[以css-tricks.com为中心]（https://css-tricks.com/centering-css-complete-guide/） – kub1x 2017-03-30 10:55:31

答

将position属性更改为fixed而不是absolute。

如果您需要滚动弹出div和大于屏幕的div，那么怎么办？ – Darcbar 2012-02-27 15:32:15

坚持认为这不是最具响应性的解决方案（但是针对上述问题的完美解决方案）。检查http://getbootstrap.com/javascript/#modals，并与您的DevTools一起看看关于使用弹出窗口/模式的一些好的想法。 – 2014-06-13 09:02:52

答

变化position:absolute;到position:fixed;

答

报价：我想知道如何显示在屏幕中间的DIV，用户是否已滚动向上/向下。

变化

position: absolute;

要

position: fixed;

W3C规范position: absolute和position: fixed。

@Dreamonic，一个简单的引言可以澄清罗嗦的问题，并且即使在编辑问题后也能保持简短的答案。简洁是好的。清晰简洁更好。 – Sparky 2013-05-13 20:33:34

答

我刚刚发现了一个新的窍门，即使您没有固定的尺寸，也可以在屏幕中间放置一个盒子。假设你想要一个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,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; 
}

在屏幕中间的中心div - 即使当页面向上/向下滚动时

相关推荐