Question

Given a div with known dimensions, say width: 300px; height: 200px, what is the easiest method to place it in the middle of the screen both vertically and horizontally ? Example here

I’m interested in latest Firefox (no need for IE hacks).

CSS only please, no Javascript.

Answer 1

Position it 50% from the window/parent container and use a negative margin size that’s half of the elements width/height 🙂

position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;

You might need to set height: 100%, on both the body and html

html, body {
    height: 100%;
}

Edit: Here’s a working example .