The <center> tag for centring text in HTML was deprecated in HTML5. CSS is now used to centre text. Utilising the text-align property within the style tag makes code cleaner and helps prevent potential errors.

How to centre text using the html center tag

Today, the CSS command text-align is used for HTML centring, i.e., centring text in an HTML document. This instruction is used to horizontally format text. For a long time, the now obsolete HTML <center> tag was used for this purpose. However, with the introduction of HTML5, the tag is no longer supported.

Web hosting
The hosting your website deserves at an unbeatable price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced protection
  • Only at IONOS: up to 500 GB included

How to achieve HTML centring with text-align in CSS

Since HTML5, you store the instruction to centre text in HTML in the style tag. The easiest way to illustrate this process is with an easy example. In the following code, we’ll centre the headline, the text and an HTML div container in an HTML document:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s where your content goes.</p>
<div>Here you’ll find a div.</div>
</body>
</html>
html

The structure of the document is determined in advance, ensuring that the code remains organised and helping to prevent errors.

Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website protection with one Wildcard SSL
  • Free Domain Connect for easy DNS setup

How did the obsolete HTML <center> tag work?

In older versions of the language, the HTML tag <center> was used to centre HTML text. However, since it’s obsolete and no longer supported, it’s best to use the CSS solution instead. For the sake of comparison though, we’ll go over its syntax and show you an example of how the HTML <center> tag was used. First, let’s take a look at the syntax:

<center><p>Text</p></center>
html

Unlike modern solutions, the code had to be changed directly in the HTML body to centre text. Depending on the scope and structure, this often resulted in messy code that was more susceptible to errors:

<!DOCTYPE html>
<html>
<body>
<p>Here is a text that has not been centred.</p>
<center><p>Here is a text that has been centred.</p></center>
</body>
</html>
html

The result looks something like this:

Image: HTML centring example
In the example you can see that the text is placed in the middle of the centre tag.
Tip

You can find everything you need to know about Hypertext Markup Language in our Digital Guide. Here, we explain how to take your first steps with HTML and how to integrate CSS into HTML, using lots of practical examples.

Go to Main Menu