The HTML <center> tag is one of those funny little tags left over from the early days of websites when designers often mixed the publishing of web content with design. These days, it’s much easier to separate content and design by using effective style sheets.

To center any text in HTML and CSS, we can simply add a couple of lines of code to our stylesheet file as follows:

[source lang="css"].center {
text-align:center;
}[/source]
This little code snippet will center the content within a block tag (such as a <p> or <h1>) but only if it already knows the width of the object you’re centering too! To get around this, we can simply add the display:block tag to our CSS:

[source lang="css"].center {
text-align:center;
display: block; 
}[/source]
Now our code knows to center text.

To apply it to our HTML code, you need to simply apply the code to an object as a class. For example let’s turn a heading into a centered heading by applying the new class like so:

[source lang="html"]
<h1 class=’center’>This is my header.</h1>
[/source]

It is of course also possible to simply align all <h1> tags to the center by using the code:

[source lang="css"]h1 {
text-align:center;
display: block;
}[/source]

What about converting existing pages?

Luckily if you already have a bunch of documents which use <center> tags there’s fairly simple fix for you to clean up those files. Using a tool like Adobe Dreamweaver you can do bulk search and replace functions across multiple files.

The replace is a two step process. (please backup your site before doing this)

First, let’s replace the phrase </center> with </div> across the entire site. This will change the closing tag (remember all tags come in pairs right?) to be a normal div tag.

Now, let’s replace the phrase <center> with <div class=’center’> to turn the opening tag into a div tag with the center class assigned.

You can now add the .center details to your CSS file and presto, your website is now using the proper center formating!