Javascript 如何使用Javascript居中对齐弹出div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3202583/
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 center align pop up div using Javascript
提问by Parag
How to align a pop up division to center of monitor/screen using javascript?
如何使用javascript将弹出分区与监视器/屏幕的中心对齐？
I tried using screen.width and screen.height to get center. But the division gets aligned to center of scrolling page vertically
我尝试使用 screen.width 和 screen.height 来获得中心。但是分区垂直对齐到滚动页面的中心
Thanks in advance for any help and suggestions
在此先感谢您的任何帮助和建议
回答by agbb
Try this:
尝试这个：
<div id="popup" class="popup">
This a vertically and horizontally centered popup.
</div>
<a onclick="showPopup('popup');">Show Popup</a>
<style type="text/css">
.popup {
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
display:none;
}
</style>
<script type="text/javascript">
function showPopup(id) {
var popup = document.getElementById(id);
popup.style.display = 'block';
}
</script>
CSS explained:The div is 200x100, you position it 50% from the top and 50% from the left, but to have it centered fully, you need to substract from that 50% values the half of the width and height, the way to do this is to use negative margins, hence margin-top should be the negative value of the height/2 and margin-left should be the negative value of the width/2.
CSS 解释：div 是 200x100，你把它放在离顶部 50% 和离左边 50% 的地方，但是要让它完全居中，你需要从那 50% 的值中减去宽度和高度的一半，方法是这样做是为了使用负边距，因此 margin-top 应该是 height/2 的负值，margin-left 应该是 width/2 的负值。
回答by Sarfraz
How about just doing with CSS:
只使用 CSS 怎么样：
<div class="div">Some Content......</div>
.div {
margin-left: auto;
margin-right: auto;
}
回答by Adam Lukaszczyk
try:
尝试：
function msgBox(message)
{
var msgbox = document.getElementById("msgbox");
msgbox.innerHTML = message;
var x = (window.innerWidth / 2) - (msgbox.offsetWidth / 2);
var y = (window.offsetHeight / 2) - (msgbox.offsetHeight / 2);
msgbox.style.top = y;
msgbox.style.left = x;
msgbox.style.display = "block";
}
回答by bradlis7
Try fixed-positioning:
尝试固定定位：
#box {
position: fixed;
width: 40%;
margin: 200px 30%;
}
It's only horizontally centered. Vertical will take some playing with. I have no idea how browsers act differently with the vertical alignment.
它只是水平居中。垂直将需要一些玩。我不知道浏览器在垂直对齐方面有何不同。
回答by Simdan
I also had this vertical centering problem on any webpage that required scrolling.
我在任何需要滚动的网页上也遇到了垂直居中问题。
Switching to position: fixed solved it, so:
切换到 position: fixed 解决了它，所以：
position:fixed;
top:50%;
left:50%;
margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
This worked in firefox, google chrome, safari (pc) and IE9.
这适用于 firefox、google chrome、safari (pc) 和 IE9。
Unfortunately, I wanted it to appear in front of an pdf file- the pop up did appear in front using Firefox, Chrome but went behind in IE9 and Safari....
不幸的是，我希望它出现在前面pdf file- 使用 Firefox、Chrome 时弹出窗口确实出现在前面，但在 IE9 和 Safari 中落后了......
