Centering a Div in IE8 Using margin:auto

On the count of 3 everybody scream “MICROSOFT SUCKS AND I HATE INTERNET EXPLODER”.

1, 2, 3, go.

note: Newer post has solutions for centering in IE9

I’ve been working on revamping my Sticky Footer code for IE8 compatibility when I ran into a little bug of sorts. If you are using margin:0 auto; to center a div it will cause problems in IE8 if the parent element has either no width already set, or you’ve not set text alignment to center for that parent div, or you are using the wrong doc type declaration.

These are the three fixes I know of;

Width:100%

Set your containing element to width:100%; so then your centered div inside of that one will actually center. Like this;

#container {width:100%}
#centered {width:400px; margin:0 auto}

Text-Align:Center

If you apply text-align:center to the containing div IE8 will obey the margin:auto. You then have to un-center your text content inside that centered div with text-align:left. Kind of convoluted, I know. Apparently some web designer have been doing it like that for years as this was an issue with IE5.

#container {text-align:center}
#centered {width:400px; margin:0 auto;text-align:left}

Use Transitional Doc Type

If you are using XHTML 1.0 Strict as your doc type, IE8 will not obey the margin:auto method for centering an element, unless you use one of the above hacks. You can also just change your doc type declaration at the top of your page to be XHTML 1.0 Transitional. IE8 will then obey the margin:auto statement.

Here’s a link to doc type declaration syntax.

Oh the joys of cross browser web design.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BlinkList
  • Furl
  • Propeller
  • Slashdot
  • StumbleUpon
  • Technorati


DoFollow links available for frequent commentors.

15 Comments to “Centering a Div in IE8 Using margin:auto”

Joseph Rosenblatt (1 comments.) on March 30th, 2010 wrote:

Thanks for this. I thought I was going to loose my mind. Couldn’t find the mistake in my css.

Finally just broke down and searched for it.

Serge (1 comments.) on April 6th, 2010 wrote:

thank you..
PS i hate this stupid ms ie8

Asta (1 comments.) on May 12th, 2010 wrote:

width:100% helped. Thanks a lot :)

sbiker (1 comments.) on May 20th, 2010 wrote:

Nice one!!, thanks for the tips.

This one worked for me even in FF3 that was not working…

“text-align:center”

so at the end, I had to add the following div:

Vincent on June 15th, 2010 wrote:

My doctype was wrong! That hint is very precious! :)
Thanks for the help

revive on August 6th, 2010 wrote:

Unbelievably irritating.. HTML5 doctype causing same issue in IE8 .. Come on M$.. let’s get with it already!

Robert Scanlon (1 comments.) on August 26th, 2010 wrote:

Yes thank you so much - can’t believe how crap M$ get at this …

Funny how one or the other of the first two seem to work or not - needs experimentation when the css nesting is heavy for sure!

Thanks for your help!

Ashkar on September 1st, 2010 wrote:

Hey Stever…
Thanks man …
Transitional Doc Type helped me ;)

Beks on September 14th, 2010 wrote:

Thanks, missing DOCTYPE in a CMS! fixed IE6,7,8 auto margins.

msq5 on September 28th, 2010 wrote:

MICROSOFT SUCKS AND I HATE INTERNET EXPLODER!

Thanks, you really helped me. :)

Beta (1 comments.) on October 28th, 2010 wrote:

Nice work. Why can’t they just make it the same?

Thanks for the tip, saved me from continually banging my head against the desk :)

jr on November 22nd, 2010 wrote:

You saved my fuckin life.

Stever on November 22nd, 2010 wrote:

@jr, saving lives one CSS hack at a time is my job. :)

Wale on July 24th, 2011 wrote:

Thanks for this.

How to Center Div's in IE9 | Stever.ca on January 5th, 2012 wrote:

[…] 2 years ago I after Internet Exploder 8 was released I wrote a post about how to get divs to center properly when using margin:auto in your CSS. Now with the release of IE9 - yet another piece of shit MS browser - I’ve encountered […]

Leave a Comment