Question

This should be a simple question, but I can’t seem to figure it out. I made a popup using jquery, and I want it positioned in the center of the page. No matter how the site is adjusted and the resolution. Right now I’m just positioning it absolutely with CSS but the problem with that is that if you move the page around it doesn’t move the overlay and it depends on how much content is on the page. Is there a way to position it with jquery so it will also be in the center of the window?

Thanks!

Answer 1

You do not need jQuery for this. If the purpose is to always have the div in the center of the window, then you can do it with CSS.

Check working example at http://jsfiddle.net/5Q6FU/

<div class="mydiv"></div>

.mydiv{
    width:300px;
    height:300px;
    background:red;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-150px; /* negative half the size of height */
    margin-left:-150px; /* negative half the size of width */
}