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:

 
<center> <h2>Welcome</h2> <img src="banner.jpg"> </center>

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

When Might You Still See center?

  • Legacy HTML code

  • Old tutorials

  • Academic syllabi

  • Exams and theory questions

⚠️ Learn it for understanding only, not for real projects.

Common Beginner Mistakes

  • Using <center> in new projects
  • Centering content without CSS
  •  Mixing styling with HTML
  • Ignoring modern layout techniques
  •  Thinking <center> is still standard

Best Practices for Centering Content

  • Use CSS text-align for text
  •  Use CSS margin auto for images
  •  Use Flexbox or Grid for layouts
  •  Avoid deprecated HTML tags
  • Keep HTML semantic and clean

FAQs: HTML center Tag

What does the <center> tag do?

It centers content horizontally.

Is the <center> tag still supported?

Browsers may support it, but it is deprecated.

Should I use <center> in HTML5?

No. Always use CSS instead.

What replaces <center> in modern HTML?

CSS (text-align, Flexbox, Grid).

Why do exams still include <center>?

For legacy HTML knowledge.