Positioning <div> element at center of screen
With transforms being more ubiquitously supported these days, you can do this without knowing the width/height of the popup
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Easy! JSFiddle here: http://jsfiddle.net/LgSZV/
Update: Check out https://css-tricks.com/centering-css-complete-guide/ for a fairly exhaustive guide on CSS centering. Adding it to this answer as it seems to get a lot of eyeballs.
The easy way, if you have a fixed width and height:
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.
Set the width and height and you're good.
div {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
}
If you want the element dimensions to be flexible (and don't care about legacy browsers), go with XwipeoutX's answer.