The <center> tag for centering text in HTML was dep­re­cat­ed in HTML5. CSS is now used to center text. Utilizing the text-align property within the style tag makes code cleaner and helps prevent potential errors.

How to center text using the html center tag

Today, the CSS command text-align is used for HTML centering, i.e., centering text in an HTML document. This in­struc­tion is used to hor­i­zon­tal­ly format text. For a long time, the now obsolete HTML <center> tag was used for this purpose. However, with the in­tro­duc­tion of HTML5, the tag is no longer supported.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add per­for­mance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

How to achieve HTML centering with text-align in CSS

Since HTML5, you store the in­struc­tion to center text in HTML in the style tag. The easiest way to il­lus­trate this process is with an easy example. In the following code, we’ll center 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 de­ter­mined in advance, ensuring that the code remains organized and helping to prevent errors.

Domain Name Reg­is­tra­tion
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private reg­is­tra­tion for more privacy
  • 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 center HTML text. However, since it’s obsolete and no longer supported, it’s best to use the CSS solution instead. For the sake of com­par­i­son 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 center text. Depending on the scope and structure, this often resulted in messy code that was more sus­cep­ti­ble to errors:

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

The result looks something like this:

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

You can find every­thing 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