Position div to center of visible area

javascript jquery centering
mmmoustache picture mmmoustache · Jan 30, 2012 · Viewed 37.6k times · Source

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. 

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

Answer

Madara's Ghost picture Madara's Ghost · Jan 30, 2012

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

Use position: fixed instead of position: absolute.

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

Related questions

How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Mod note: This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. Please stop posting: CORS configurations for every …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More