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 vertically with CSS

In this article we will show several ways to center box content vertically. We test each way with Internet Explorer 6 (IE6) and Firefox 2 (FF2) - the two browsers that occupy lion's share of all browser market. Lately the popularity of IE6 has been steadily decreasing in favor of Internet Explorer 7, but nonetheless IE6 remains one of the most popular browsers.

When developing a new website one often runs into the problem of centering vertically some content inside a box. If the website is developed using HTML tables, then vertical centering is not an issue. The HTML standard specifies the valign attribute which conveniently solves the issue:

<table width="200" height="200" border="1">
	<tr>
		<td valign="middle">
			Box content
		</td>
	</tr>
</table>

This code works fine in practically all web browsers since all of them support HTML tables. However the problem with that solution is that it uses a total of six HTML tags for just one box. This is way too much HTML markup and the search engines usually frown upon such excessive HTML markup since they prefer plain text content.

So we will try to replace that table with a single DIV box containing our text. However once we switch from tables to DIVs we meet our main problem - the HTML specification does not define any means to put any text in the middle of any non-table container. And now the real question is: how to put text or other content in the middle of a box using CSS?

Lets give CSS a try and see different methods for centering different types of content:

Method 1. Vertical centering of a single line of text content.

If we have text content which takes a single line, we can center it by specifying line height equal to the height of the DIV container:

<div style="width: 200px; height: 200px; border: 1px solid black; line-height: 200px;">
	Box content
</div>

This method works in Internet Explorer and in Firefox. Actually it can be used not only for text content but also for most kinds of inline content as long as that content doesn't span multiple lines. The only exception is that this method does not work for vertical centering of images in Internet Explorer even if the image has "display: inline"

Note: This method is used by our Table2CSS converter when centering vertically inline content.

Method 2. Vertical centering of block content using margins.

If our DIV has block content and we know in advance both the height of the DIV and the height of the block content, then we can center that content by applying the corresponding margin value for it:

<div style="width: 200px; height: 200px; border: 1px solid black;">
	<div style="height: 30px; border: 1px solid black; margin-top: 85px;">Box content</div>
</div>

The margin-top value from the above example is calculated as: margin_top = (height_of_container - height_of_content) / 2

This method works in both Internet Explorer and Firefox. There is one serious limitation to this method though - it requires that you know the heights of both the container and the block - something that is not always possible. Additionally both the container and the content blocks have to use the same units for their heights because you need to be able to calculate the top margin.

Note: This method is used by our Table2CSS converter when centering vertically block content.

Method 3. Vertical centering using absolute positioning and negative margin.

We can center content vertically using absolute positioning and negative margin:

<div style="width: 200px; height: 200px; border: 1px solid black; position: relative;">
	<div style="height: 30px; border: 1px solid black; position: absolute; top: 50%; margin-top: -15px;">Box content</div>
</div>

This method works in both Internet Explorer and Firefox. It has a similar limitation as the previous method - you need to know the height of the content block, but you don't need to know the height of the container. This means that unlike the previous method the heights of container and content can be specified in different units.

The above methods are the most popular ones used to center content with CSS. Each one has its pros and cons so for each specific case you need to choose a suitable centering method based on the type of content that you want to center.