Html 如何将 div 弹出对话框定位到浏览器屏幕的中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8764399/
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
How to position the div popup dialog to the center of browser screen?
提问by S K
I need to position div popup to the center of browser screen ( no matter what size the screen is). And I want to keep the position as absolute as I don't want to move the popup down when I scroll down the page.
我需要将 div popup 定位到浏览器屏幕的中心（无论屏幕大小如何）。我想保持绝对位置，因为我不想在向下滚动页面时向下移动弹出窗口。
This div is displayed when button is clicked using Jquery.
使用 Jquery 单击按钮时会显示此 div。
I tried setting margin-left to half of the width like mentioned in other posts but It isn't working for me.
我尝试将 margin-left 设置为其他帖子中提到的宽度的一半，但它对我不起作用。
Here is my code
这是我的代码
CSS code:
CSS代码：
.holder{
width:100%;
position:absolute;
left:0;
top:0px;
display:block;
}
.popup{
width:800px;
margin:0 auto;
border-radius: 7px;
background:#6b6a63;
margin:30px auto 0;
padding:6px;
}
.content{
background:#fff;
padding: 28px 26px 33px 25px;
}
HTML Code:
HTML代码：
<div class="holder">
<div id="popup" class="popup">
<div class="content">
some lengthy text
</div>
</div>
</div>
Thanks!!
谢谢！！
回答by Nikhil Mathew
.popup-content-box{
position:fixed;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
回答by Jassi
Here, this ones working. :)
在这里，这些工作。:)
upd:Just in case jsfiddle is not responding here is the code...
CSS:
upd：以防万一jsfiddle没有响应这里是代码......
CSS：
.holder{
width:100%;
display:block;
}
.content{
background:#fff;
padding: 28px 26px 33px 25px;
}
.popup{
border-radius: 7px;
background:#6b6a63;
margin:30px auto 0;
padding:6px;
// here it comes
position:absolute;
width:800px;
top: 50%;
left: 50%;
margin-left: -400px; // 1/2 width
margin-top: -40px; // 1/2 height
}
HTML:
HTML：
<div class="holder">
<div id="popup" class="popup">
<div class="content">some lengthy text</div>
</div>
</div>
回答by FURKAN ILGIN
I write a code in jquery. It isnt seen an easy way. But i hope it is useful for you.
我在 jquery 中写了一段代码。这不是一个简单的方法。但我希望它对你有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.popup{
border: 4px solid #6b6a63;
width: 800px;
border-radius :7px;
margin : auto;
padding : 20px;
position:fixed;
}
</style>
<div id="popup" class="popup">
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
some lengthy text<br>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
var popup_height = document.getElementById('popup').offsetHeight;
var popup_width = document.getElementById('popup').offsetWidth;
$(".popup").css('top',(($(window).height()-popup_height)/2));
$(".popup").css('left',(($(window).width()-popup_width)/2));
});
</script>
回答by Alexander Ivashchenko
You can use CSS3 'transform':
您可以使用 CSS3 '转换'：
CSS:
CSS：
.popup-bck{
background-color: rgba(102, 102, 102, .5);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
.popup-content-box{
background-color: white;
position: fixed;
top: 50%;
left: 50%;
z-index: 11;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
HTML:
HTML：
<div class="popup-bck"></div>
<div class="popup-content-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
*so you don't have to use margin-left: -width/2 px;
*所以你不必使用 margin-left: -width/2 px;
回答by Abhishek Jain
Its a classical problem, when you scroll the modal popup generated on the screen stays at it place and does not scroll along, so the user might be blocked as he might not see the popup on his viewable screen.
这是一个经典问题，当您滚动屏幕上生成的模态弹出窗口时，它会停留在原地而不是滚动，因此用户可能会被阻止，因为他可能无法在其可视屏幕上看到弹出窗口。
The following link also provides CSS only code for generating a modal box along with its absolute position.
以下链接还提供了用于生成模态框及其绝对位置的仅 CSS 代码。
回答by Peter Rowell
Note: This does not directly answer your question. This is deliberate.
注意：这并不能直接回答您的问题。这是故意的。
A List Aparthas an excellent CSS Positioning 101article that is worth reading ... more than once. It has numerous examples that include, amongst others, your specific problem. I highly recommend it.
A List Apart有一篇优秀的CSS Positioning 101文章，值得一读……不止一次。它有许多示例，其中包括您的具体问题。我强烈推荐它。
回答by Giorgio Barchiesi
It took a while to find the right combination, but this seems to center the overlay or popup content, both horizontally and vertically, without prior knowledge of the content height:
花了一段时间才找到正确的组合，但这似乎将覆盖或弹出内容水平和垂直居中，而无需事先了解内容高度：
HTML:
HTML：
<div class="overlayShadow">
<div class="overlayBand">
<div class="overlayBox">
Your content
</div>
</div>
</div>
CSS:
CSS：
.overlayShadow {
display: table;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 20;
}
.overlayBand {
display: table-cell;
vertical-align: middle;
}
.overlayBox {
display: table;
margin: 0 auto 0 auto;
width: 600px; /* or whatever */
background-color: white; /* or whatever */
}
回答by Danferth
I think you need to make the .holderposition:relative;and .popupposition:absolute;
我认为你需要制作.holderposition:relative;和.popupposition:absolute;
回答by rjbaj
One solution where we need not know the width/height of the dialog and then assume the margins.
我们不需要知道对话框的宽度/高度然后假设边距的一种解决方案。
Html:
网址：
<div id="dialog-contain"> <-- This div because I assume you might have a display that is not a flex. '
<div id="block">
<div id="centered">
stuffs
</div>
</div>
</div>
Css:
css：
#dialog-contain { // full page container.
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
...
}
#block { // another container simply with display:flex.
display: flex;
height: 100%;
width: 100%;
justify-content: center;
}
#centered { // another container that is always centered.
align-self: center;
}
