HTML center Tag – Complete Guide for Beginners

Introduction: What Is the HTML Center Tag?

In early versions of HTML, developers often needed a quick way to center text, images, or content on a webpage.
For this purpose, HTML introduced the <center> tag.

You may still see <center> in:

Old websites
Legacy code
Beginner tutorials
Exam or interview questions

However, in modern web development, the <center> tag is deprecated and not recommended.

This guide explains:

What the HTML <center> tag is
How it works with examples
Why it is deprecated
The correct modern alternatives using CSS

What Is the HTML Center Tag

The HTML <center> tag was used to align content horizontally to the center of a webpage.

👉 In simple words:

Anything placed inside <center> appeared in the middle of the page.

Basic Syntax of `<center>` Tag

<center>
  Centered content
</center>

Key Points

<center> is a paired tag
It centers text, images, and other elements
It affects alignment, not structure

Example 1: Centering Text Using `<center>`

<center>
  <p>This text is centered.</p>
</center>

Output Explanation

The paragraph appears in the center
Alignment is horizontal only

Example 2: Centering an Image

<center>
  <img src="logo.png" alt="Logo">
</center>

The image appears centered on the page.

What Can Be Centered Using center?

Using <center>, you could center:

Text
Images
Headings
Tables
Forms

Example:

Is the HTML center Tag Deprecated?

Yes, the `<center>` tag is deprecated.

Not supported in HTML5 standards
Not recommended for modern websites
Mixing content and presentation
Poor accessibility and SEO practices

Browsers may still render it, but you should not use it.

Why the center Tag Is Not Recommended

Problems with `<center>`

No semantic meaning
Breaks separation of structure and style
Difficult to maintain
Not responsive-friendly
Not accessible

Modern web development follows this rule:

HTML = Structure
CSS = Styling

Modern Alternative 1: Center Text Using CSS

Recommended Way

<p class="center-text">This text is centered.</p>
css
Copy code
.center-text {
  text-align: center;
}

Clean
Semantic
SEO-friendly

Modern Alternative 2: Center an Image Using CSS

<img src="logo.png" class="center-image">
css
Copy code
.center-image {
  display: block;
  margin: auto;
}

center vs CSS (Comparison Table)

Feature	`<center>`	CSS
HTML5 support	❌ Deprecated	✅ Supported
Flexibility	❌ Limited	✅ High
Accessibility	❌ Poor	✅ Better
Responsive design	❌ No	✅ Yes
Professional use	❌ No	✅ Yes