Centering Article Element in Internet Explorer With Margin:auto

Its amazing how many quirks internet explorer has when it comes to proper handlingof css. Another one to add to the list.

A common trick to center an element on the screen regardless of the user’s resolution is to:

  1. Set the element’s width
  2. Define margin-left and margin-right to auto i.e
margin: 0 auto;


margin: 15px auto 5px auto;

Internet Explorer for the most part handles this correctly. (See when it doesn’t work properly)

Unfortunately this trick does not work on the HTML5 article element in IE9 (not tested on other versions of Internet Explorer although I imagine they behave similar).

The workaround is to wrap your article element in a DIV or other equivalent block element.