How to center a div vertically and horizontally on a page

I came across many young designers asking how to centre an element on the website and not using the table. Using table layout is was very easy but not so obvious when we use divs. I am not going to go into details why divs not tables because it is not the intention of this article.

HTML code

<body>
<div id="out">
<div id="cnt">
<h1>Header</h1>
<p>Content of the centered element…</p>
</div>
</div>
</body>

This is really basic html. To centre the element we need 2 divs. Our #out div is the outer element that we will be referring to, in order to position our #cnt div (our content element).

CSS code

#out { position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; } #cnt { width: 400px; height: 80px; margin-left: -200px; /* width of the #cnt / 2 */ position: absolute; top: -40px; /* height of the #cnt / 2 */ left: 50%; text-align:center; }

The outer div is positioned 50% from the top, it means half way down the page.

Next we style our #cnt div (content) giving a negative top position which is half of the actual height. This is in order to place it exactly on the middle. Additionally we place it half way horizontally (left:50%) and have a negative left margin which is half of the actual width. The rest should be easy to understand.

Conclusion

I have tested it on Firefox 2 and 3 then on Opera 9, Safari 3 and IE 4, 5, 6, 7. Please let me know if you found it not working on your browser.

This is nothing new but might be helpful to someone. Don´t forget to leave a comment.

How to center a div vertically and horizontally on a page

Pawel Martuszewski