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.