Vertically and horizontally center a div using CSS

As a web designer, I'm often asked to center content on a web page, vertically as well as horizontally. This is often referred to as 'the letterbox effect'. Back in the day, when we all used tables to mark up our pages, this was a pretty simple task. However, now that everyone knows the error of their ways and tables are considered old hat, ugly and an improper way of marking up a page, this task has actually become more complicated.

The question 'How do I vertically center text on a page?' is one that's commonly asked on webmasters forums, and one that has been answered in many different ways. Well, today I was asked once again to do the terrible deed. After digging through all of my old code looking for the answer, I began to wonder why I never posted this to a blog when I first discovered it...

Try a demonstration (and let me know if it doesn't work in your browser)

The technique I'm going to look at uses CSS only and works under the following conditions:

• You do not know the dimensions of the browser window (user can resize)
• You do know the dimensions of your main content area (fixed size)

The mark-up

The mark up is simple and consists of two structural divs - one container div, and another to hold the page content.

<div id="outer">
  <div id="inner">
    [content here]
  </div>
</div>

The CSS

#outer {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  overflow: visible;
}
 
#inner {
  width: 300px;
  height: 200px;
  margin-left: -150px;  /***  width / 2   ***/
  position: absolute;
  top: -100px;          /***  height / 2   ***/
  left: 50%;
}

The outer div  is is positioned half way down the page (top 50%). It has a height of 1px and it's overflow is set to visible.

The content box has it's width and height absolutely specified. It is then positioned 50% horizontally across the page (left:50%) and has it's left margin set to a value that is half it's width. This deals with the horizontal centering. To do the vertical centering we give it a negative top position that is half it's height.

Compatibility

I have tested on the following browsers, although I don't see any reason why it shouldn't work on others - but that's not to say that it does!

• Firefox 2 (pc/linux)
• Firefox 3.0.1 (pc/linux)
• Opera 9.27 (pc/linux)
• Safari 3.1.1 (pc)
• IE (4.01, 5.01, 5.5, 6, & 7)

This isn't a technique that I claim to have invented and neither is it one which I want to take any credit for - I would have posted references to the original articles which I used to help me create it, but unfortunately this was done so long ago that I have since forgotten where I found it.