Html 即使页面向上或向下滚动，在屏幕中间居中一个“div”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6334495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a 'div' in the middle of the screen, even when the page is scrolled up or down?
提问by tanya
I have in my page a button which when clicked displays a div(popup style) in the middle of my screen.
我的页面中有一个按钮，单击该按钮时div，屏幕中间会显示一个（弹出式样式）。
I am using the following CSS to center the divin the middle of the screen:
我正在使用以下 CSSdiv将屏幕中间居中：
.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;
}
This CSS works fine as long as the page is not scrolled down.
只要页面没有向下滚动，这个 CSS 就可以正常工作。
But, if I place the button at the bottom of my page, when it is clicked, the divis displayed at the top, and the user has to scroll up to view the contents of the div.
但是，如果我将按钮放在我的页面底部，当它被点击时，div显示在顶部，用户必须向上滚动才能查看div.
I would like to know how to display the divin the middle of the screen, even when the page has been scrolled.
我想知道如何div在屏幕中间显示 ，即使页面已经滚动。
回答by BraedenP
Change the positionattribute to fixedinstead of absolute.
将position属性更改为fixed而不是absolute。
回答by Richard JP Le Guen
Change position:absolute;to position:fixed;
更改position:absolute;为position:fixed;
回答by Sparky
Quote: I would like to know how to display the div in the middle of the screen, whether user has scrolled up/down.
引用: 我想知道如何在屏幕中间显示 div，用户是否向上/向下滚动。
Change
改变
position: absolute;
To
到
position: fixed;
W3C specifications for position: absoluteand for position: fixed.
回答by SequenceDigitale.com
I just found a new trick to center a box in the middle of the screen even if you don't have fixed dimensions. Let's say you would like a box 60% width / 60% height. The way to make it centered is by creating 2 boxes: a "container" box that position left: 50% top :50%, and a "text" box inside with reverse position left: -50%; top :-50%;
我刚刚发现了一个新技巧，即使您没有固定尺寸，也可以将一个框放在屏幕中间。假设您想要一个宽度为 60%/高度为 60% 的框。使其居中的方法是创建 2 个框：一个位于左侧的“容器”框：50% 顶部：50%，以及一个位于内部的“文本”框，左侧反向位置：-50%；顶部：-50%；
It works and it's cross browser compatible.
它可以工作并且跨浏览器兼容。
Check out the code below, you probably get a better explanation:
看看下面的代码，你可能会得到更好的解释：
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>回答by Sakthi Karthik
Correct Method is
正确的方法是
.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;
}
