将div定位到可见区域的中心

我正在为邮件列表注册制作灯箱式弹出窗口，但我希望弹出窗口位于可见页面的中心，而不仅仅是整个文档的中心; 如果用户滚动到页面底部并单击以进行注册，我希望它显示在屏幕的中央。

我假设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; } 

Answer 1

你很亲密！ 它可以单独用CSS完成：

使用position: fixed而不是position: absolute 。

Fixed是指视口，而absolute是指文档。 阅读所有关于它的内容！

Answer 2

 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"; 

Answer 3

我知道这不会解决问题，但它是一个很好的参考和一个起点： 如何将div放在浏览器窗口的中心

位置Div恰好位于屏幕中央

JSFiddle在这里和这里

Answer 4

用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}); 

Answer 5

虽然接受的答案是最好的，但如果你不能将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

或者更简洁的版本：

 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'; 

这个答案是来自Lahiru Ashan的回答的香草JavaScript版本。