How to Center a Header with HTML and CSS

Code Library

Published on January 24, 2010 and updated on May 2, 2026 by Christopher Ross

Here’s a quick tip that’ll help you centre a heading using nothing more than a little bit of HTML and CSS.

First, in a new HTML document (which you can create using something as simple as Notepad or TextEdit simply by saving your text document with the .html extension), you’ll want to create a new heading. You can do it by including the following code in your document:

<h1>Hello World</h1>

This text adds a standard heading to your website but what if you want to centre the heading on the page? Easy! Let’s modify the standard <h1> tag to apply a style sheet directly to it:

<h1 style="text-align:centre;">Hello World</h1>

You’ll notice that I don’t need to setup an individual style sheet to accomplish this task, simply adding the style attribute will allow me to make the changes to this one specific item. If I want to be able to centre multiple items, I could use a style sheet class to accomplish the task:

<style>.centre { text-align: centre; }</style>
<h1 class="centre">Hello World</h1>

Note the class is represented in the style sheet as a period (.) plus the name of the class. Similarly, if I wanted to assign the centre to all occurrences of the <h1> tag I could use:

<style>h1 { text-align: centre; }</style>
<h1>Hello World</h1>

Last Reviewed

This article was last reviewed on May 2, 2026 for accuracy and relevance.

Ready for the Next Step?

If this connects to a real challenge your team is facing, I can help you map a next step.

Book a discovery call