WWW FAQs: How do I center an element horizontally with CSS?

2006-08-13: As with many things in CSS, horizontal centering is easy... but making sure it works in every major web browser takes a little care and attention to detail.

Solving the Problem in Strict Mode

The "correct" way to center an element horizontally is by setting its CSS margins to auto. Standards specify that the left and right margins should fill the available space in the enclosing element, which results in horizontal centering.

And if you're using the HTML 4.01 strict DTD, that's all you need to do, as long as you're not worried about very old versions of Internet Explorer. In "strict mode," Internet Explorer 6 can handle centering exactly the same way Firefox, Safari and Opera do. Which makes for simple code.

Here's a simple solution for strict mode:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centering Test</title>
</head>
<!-- Works for all common browsers -->
<body>
<div style="width: 100px;
  height: 100px;
  background-color: green;
  margin: auto">
Centered Green Box
</div>
</body>
</html>

Solving the Problem in Quirks Mode

Don't want to suffer for compatibility with Internet Explorer 5? You might encourage your Windows 95, 98 and Me users to switch to Firefox instead.
I recommend you use the strict DTD for the cross-browser consistency it brings to your web design. But if you prefer "quirks mode" (what you get without the strict DTD), or you must support Internet Explorer 5.5 or older (found in Windows Me and below), then you won't be able to center your content with margin: auto. Versions of Internet Explorer older than version 6, as well as newer versions of Internet Explorer when in "quirks mode," don't react correctly to margin: auto. So the element doesn't get centered in those browsers.

Fortunately, there's a simple trick to work around this. The same browsers that don't react correctly to margin: auto also react incorrectly to text-align: center, which should apply only to text - more precisely, to "inline elements." In this case, the incorrect behavior works in our favor: we use text-align: center to convince old versions of Internet Explorer to play nicely... and we use margin: auto to please everyone else.

To get the desired effect in Internet Explorer 5.5 and below, we must apply the text-align: center style to the enclosing element. If we want to center our element on the page, then the parent element is the body element.

Of course, text-align: center will be inherited by our child element. And we don't actually want our text to be centered. So we must be careful to apply the text-align: left style to our child element, to reverse that side effect.

For clarity's sake, I'll first show the solution just for old versions of Internet Explorer (and modern versions in "quirks mode"):


<!-- Works only in quirks mode and old versions of IE -->
<body style="text-align: center">
<div style="width: 100px;
  height: 100px;
  background-color: green;
  text-align: left">
Centered Green Box
</div>
</body>

But how do we solve the problem for non-IE browsers at the same time?

As it turns out, it's easy to apply all of the styles at once. The text-align: center style doesn't cause any problems for more modern browsers, because we cancel it with text-align: left in the child element. And margin: auto is safely ignored by Microsoft Internet Explorer when in quirks mode.

Here's the complete solution:


<!-- Works in all common browsers without strict DTD -->
<body style="text-align: center">
<div style="width: 100px;
  height: 100px;
  background-color: green;
  margin: auto;
  text-align: left">
Centered Green Box
</div>
</body>

See also How do I center the content of an element vertically with CSS?

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.