Javascript 将 div 定位到可见区域的中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9062583/
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
Position div to center of visible area
提问by mmmoustache
I'm in the midst of making a lightbox style pop-up for a mailing list sign up, but I want the pop-up to position to the center of the visible page, not just the center of the whole document; if the user scrolls to the bottom of the page and clicks to sign up, I want it to appear in the center of the screen.
我正在为邮件列表注册制作灯箱样式的弹出窗口，但我希望弹出窗口位于可见页面的中心，而不仅仅是整个文档的中心；如果用户滚动到页面底部并点击注册，我希望它出现在屏幕中央。
I'm assuming jQuery/JS will be the best way to go for this; here's my current CSS code which works fairly well but the div needs to be pushed down into the visible space dynamically for smaller screens.
我假设 jQuery/JS 将是最好的方法；这是我当前的 CSS 代码，它运行得相当好，但是对于较小的屏幕，需要将 div 动态下推到可见空间中。
.my-div{
width:960px;
height:540px;
position:absolute;
top:50%;
left:50%;
margin-left:-480px;
margin-top:-270px;
z-index:60;
display:none;
}
回答by Madara's Ghost
You were close! It can be done with CSS alone:
你很接近！可以单独使用 CSS 来完成：
Use position: fixedinstead of position: absolute.
使用position: fixed代替position: absolute。
Fixed refers to the viewport, while absolute refers to the document. Read all about it!
固定指的是视口，而绝对指的是文档。阅读所有关于它的内容！
回答by Lahiru Ashan
var w = $(window).width();
var h = $(window).height();
var d = document.getElementById('my-div');
var divW = $(d).width();
var divH = $(d).height();
d.style.position="absolute";
d.style.top = (h/2)-(divH/2)+"px";
d.style.left = (w/2)-(divW/2)+"px";
回答by Adrian P.
I know this will not solve the question but it is good reference and a starting point: How to position a div in the center of browser window
我知道这不会解决问题，但它是很好的参考和起点：如何将 div 定位在浏览器窗口的中心
Position Div Exactly at the center of the screen
将 Div 准确定位在屏幕中央
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.exactCenter {
width:200px;
height:200px;
position: fixed;
background-color: #00FF00;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="exactCenter"> </div>
</body>
</html>
回答by André Al?ada Padez
with jQuery:
使用 jQuery：
var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});
回答by Jessica
Although the accepted answeris best, if you can't set the divs positionto fixed, then you can use this pure JavaScript solution.
虽然接受的答案是最好的，但如果您不能将 设置divs position为fixed，那么您可以使用这个纯 JavaScript 解决方案。
var myElement = document.getElementById('my-div'),
pageWidth = window.innerWidth,
pageHeight = window.innerHeight,
myElementWidth = myElement.offsetWidth,
myElementHeight = myElement.offsetHeight;
myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";
JSFiddle
JSFiddle
Or a more condensed version:
或者更简洁的版本：
var w = window,
elem = document.getElementById('my-div');
elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';
This answer is a vanilla JavaScript version from Lahiru Ashan'sanswer.
这个答案是来自Lahiru Ashan 的答案的原生JavaScript 版本。
