How to center an element in quirks mode

It has been my problem because I needed to use quirks mode due to Ext not playing well in standards compliant mode and still have an element, a container with fixed width, centered in the browser’s window working cross-browser.

Standard approach is to use css:

Nice and simple but it doesn’t work in IE in quirks mode, works in strict mode though.

Another approach I’ve found googling for a solution was:

This works, also in IE, but the problem is that Ext creates many elements as direct children of the body so it introduced many rendering problems such as menu items appeared centered, combo box dropdown items were centered, messages in message boxes, etc.

Finally, this works everywhere without bad side effects:

with this markup:

We do not touch body here but we create a “container wrap” that center aligns texts and inside of it our real container in which we set text alignment back to left.

Works perfect cross browser.

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestEmail this to someone
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


  1. Mouse says

    Thanks so much! I can’t develop in standards mode because our older pages aren’t compliant, and I’ve been looking for a solution for this.

  2. someguy says

    * html body {
    text-align /**/: center;
    * html body * {
    text-align /**/: left;

    works all the way down to IE5 (five)

We will be happy to hear back from you

Please Login to post a comment