Table2CSS logo Table2CSS is a tool that can convert your table-based websites to tableless layouts, replace deprecated HTML tags with modern CSS and reformat your HTML code. Click here for more information

How to center content horizontally with CSS

Unlike vertical centering, horizontal centering is supported much better in most popular web browsers. However there are still some issues with horizontal centering caused mostly by the fact that there is no single way to center arbitrary content with CSS rules. Instead different approaches should be used for different types of content. Additionally the web page rendering mode may affect some of these centering rules.

Below we summarize different approaches to centering of HTML content.

Centering inline text content

This is the easiest case because CSS has a property explicitly targeting it. Adding text-align: center; to the CSS properties of any block will center our text. Example:

<style type="text/css">
.container {text-align: center;}
</style>
...
<div class="container">Our text is centered</div>

Centering fixed-width block content by setting left and right margins to auto

The CSS 2.1 specification says: "If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block." (http://www.w3.org/TR/CSS21/visudet.html#blockwidth) So if we can fix the width of our block element, then we can center it just by setting margin-left and margin-right to auto. Example:

<style type="text/css">
.container {
	width: 500px;
	height: 500px;
	border: 1px solid black;
}
.content {
	width: 200px;
	height: 200px;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
}
</style>
...
<div class="container"><div class="content"></div></div>

The example above will display two boxes, the inner one being centered horizontally inside the outer one.

For Internet Explorer this method only works if the page is rendered in strict mode This means that you will need to add a strict document type at the top of your web page, e.g. :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Even though using strict mode for page rendering is the best option, there may be some cases in which you could still prefer using quirks mode. In this case you will need to find a workaround to compensate for this shortcoming of Internet Explorer.

Luckily Internet Explorer has yet another bug which in our case actually helps us workaround the previous one. If we specify the text-align: center; property to the outer DIV, then IE will use incorrectly this property to center the inner block elements:

<style type="text/css">
.container {
	width: 500px;
	height: 500px;
	border: 1px solid black;
	text-align: center;
}
.content {
	width: 200px;
	height: 200px;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
}
</style>
...
<div class="container"><div class="content"></div></div>

So this example will work correctly in most modern browsers. There is just one finishing touch that we must add for our solution to be perfect. The text-align property cascades down to the inner block, so we must add another text-align property to the inner DIV, in order to neutralize the effect from the outer text-align:

<style type="text/css">
.container {
	width: 500px;
	height: 500px;
	border: 1px solid black;
	text-align: center;
}
.content {
	width: 200px;
	height: 200px;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
</style>
...
<div class="container"><div class="content"></div></div>

Of course you may need to adjust the value of the inner text-align, in case you need some other alignment for the inline content of the inner DIV.

Please note that for this centering method to work the centered block must have a fixed width. If you omit the width property of the inner DIV from our example, it will expand to 100% of the outer block width.

Centering fixed-width block content using a negative margin

The idea behind this type of centering is to position the inner block absolutely at 50% of the container width. If we do this then the left border of the inner block will be exactly in center of the container. Then we will use a negative margin to move the inner block slightly to the left so that its center will align with the center of the container. Obviously the adjustment value is exactly half of the inner block width. That is why this centering method works only in cases when we know the width of the inner block beforehand. Example:

<style type="text/css">
.container {
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid black;
}
.content {
	position: absolute;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	height: 200px;
	border: 1px solid black;
}
</style>
...
<div class="container"><div class="content"></div></div>

Centering arbitrary-width block content using a display value of table or inline-block

In this case we set the display of the inner block to table or inline-block and then center the inner block just like any other inline content using text-align: center. However there is a slight browser incompatibility - Internet Explorer does not support display: table and older versions of Firefox do not support display: inline-block. So we need to detect the browser type and use the corresponding value. Example:

<style type="text/css">
.container {
	text-align: center;
	width: 500px;
	height: 500px;
	border: 1px solid black;
}
.content {
	display: table;
	width: 200px;
	height: 200px;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
}
</style>

<!--[if IE]>
<style type="text/css">
.content {display: inline-block;}
</style>
<![endif]-->
...
<div class="container"><div class="content">Some content</div></div>