Tags: | css | web design | centering | IE bugs |

2007-10-25 21:36

CSS How-To: Centering a DIV or Other Element in a Browser Window

A web design/CSS question I have seen asked a lot recently is how to center a div or other element in a browser window using CSS. The most basic answer that you will run into if you do a search on google is to set the properties margin-left and margin-right to auto, and this should center the element:

#main {
margin-left:auto;
margin-right:auto;
}

This does work well for Firefox, but Internet Explorer has a bug that doesn't correctly render these properties, leaving the element on the left side of the window where it shouldn't be. The most common work around that people use is to add the text-align property to the element as well:

#main {
margin-left:auto;
margin-right:auto;
text-align:center;
}

Using the text-align property to center an element works in IE only because of another IE bug; in reality this property should only center the text inside the element, and not the element itself. I hate using this "fix" because it is exploiting a bug to fix the error of another bug, and it just doesn't seem right. Also, it is problematic because in addition to centering the element, all text in the affected element will be centered as well, prompting the use of another element directly inside the first element, just to re-align the text to the left:

#main {
margin-left:auto;
margin-right:auto;
text-align:center;
}

#main_2 {
text-align:left;
}

This is probably the most often used technique for centering an element because it works for both firefox and IE, and it's easy enough to do. Thankfully, I am not left without any other options, because there is a second technique that doesn't rely on IE bugs to get the job done. The only downside to the second technique is, the size of the soon-to-be-centered element must be fixed. What you do is set the position to absolute, set the "left" property to 50%, and set the margin-left property to negative 1/2 of the element's width:

#main {
width:800px;
position:absolute;
left: 50%;
margin-left: -400px;
}

The absolute positioning allows you to set the element's permanent distance from the left side of the browser with the use of the "left" property. You are setting left to 50%, causing the left border of the element to rest half way across the browser window. Of course, this is not yet centered, but when you set a negative margin on the left side of the element, equal to half the width of the element, you are moving the element half of it's width to the left, essentially centering it in the browser window. I love this solution because it is simple and elegant, and barring any stupid rendering bugs, should work flawlessly in all browsers. Also, if presented with the opportunity, this also works to vertically center an element with a fixed height. So, next time you are trying to center an element on a web page without using tables, give it a try.

- Kevin
Kevin (at) Upcsite (dot) Net

If you enjoyed this post, Please consider subscribing to my full-post feed, or subscribing to receive my posts by email. Have anything to say? I love feedback on my posts, so feel free to leave a comment below.

< Next Post | Previous Post >

Comments:

Post A Comment: