how do I center javascript css popup div, no matter what the screen resolution?

Question

I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it's 100px from the top (already got that through the CSS #dialog) and also in the center of the screen, no matter what the user's resolution is? ```

Accepted Answer

CSS based solution to center:

You need to use these styles to make it appear dead-center:

```
position:absolute;
top:50%;
left:50%;
width:400px;  /* adjust as per your needs */
height:400px;   /* adjust as per your needs */
margin-left:-200px;   /* negative half of width above */
margin-top:-200px;   /* negative half of height above */
```

So `position` should be specified. The `top` and `left` should be `50%`. The `margin-left` and `margin-top` should be negative one half of the width and height of the box respectively.

Notice that if you want your popup to appear on center even when page is scrolled you will have to use `position:fixed` instead with the draw back that it doesn't work in IE6.

how do I center javascript css popup div, no matter what the screen resolution?

Solution

Problem