将div定位到可见区域的中心 [英] Position div to center of visible area

问题描述

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

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.

我假设jQuery/JS将是最好的方法；这是我当前的CSS代码，效果很好，但是div需要动态地向下推到可见空间以用于较小的屏幕.

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.

.my-div{
    width:960px;
    height:540px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:60;
    display:none;
}

推荐答案

您很亲密！可以仅使用CSS来完成:

You were close! It can be done with CSS alone:

使用position: fixed代替position: absolute.

固定"是指视口，而绝对"是指文档. 阅读所有内容！

Fixed refers to the viewport, while absolute refers to the document. Read all about it!

这篇关于将div定位到可见区域的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！