HTML <center> Tag

Q: What was the HTML center tag used for?

The HTML center element horizontally centered its child content — text, images, and other elements — within its container. It was a quick presentational shortcut before CSS layout.

Q: Is the center tag still valid in HTML5?

No. The center tag is obsolete and removed from the HTML5 specification. Use CSS text-align: center for text, margin: 0 auto for block boxes, or flexbox for modern layouts.

Q: What replaced the center tag?

CSS replaced center. Use text-align: center for inline text, margin: 0 auto on a fixed-width block element, or display: flex with justify-content and align-items for flexible centering.

Q: Should beginners use the center tag?

No. Beginners should learn CSS centering techniques. Study center only to recognize it in old HTML tutorials and legacy websites.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 4 Examples

Text & Layout

HTML center tag tutorial — centering content with CSS alternatives

Overview

What You’ll Learn

By the end of this tutorial, you’ll understand legacy centering markup and the modern CSS techniques that replaced it.

Historical Syntax

How <center> horizontally aligned child content.

Obsolete Status

Why HTML5 removed <center> from the specification.

text-align

Center inline text and headings with CSS.

margin: 0 auto

Center block-level boxes with a fixed width.

Flexbox Centering

Center content horizontally and vertically in containers.

Legacy Maintenance

Recognize center in old tutorials and migrate to CSS.

Fundamentals

What Was the `<center>` Tag?

The <center> element was a block-level HTML tag that aligned its child content to the horizontal center of its container. It could wrap headings, paragraphs, images, and other elements.

⚠️

Obsolete in HTML5 — Use CSS

Do not use <center> in new projects. Use CSS text-align, margin: 0 auto, or flexbox instead. Browsers still render the tag for backward compatibility only.

HTML5 moved presentational alignment to stylesheets. Learn <center> to read legacy HTML, but center content with CSS in all new work.

use-css-instead.css

.centered-text { text-align: center; }
.centered-box  { margin: 0 auto; width: 300px; }

Foundation

📝 Syntax (Historical)

Wrap content between opening and closing <center> tags:

syntax.html

<center>Your Centered Content Here</center>

<center> is a block element—it wraps multiple child elements.
It centered both inline text and block-level children horizontally.
Self-closing syntax (<center />) is not valid in HTML.
Do not nest multiple <center> tags unnecessarily.

Cheat Sheet

⚡ Quick Reference

Use Case	Code Snippet	Notes
Legacy centering	`<center>Text</center>`	Obsolete — legacy render
Center text	`text-align: center;`	Preferred for headings and paragraphs
Center block box	`margin: 0 auto;`	Requires a set width on the element
Flexbox center	`justify-content: center;`	Horizontal and vertical centering
Tag-specific attrs	`None`	Global attributes only
HTML5 status	Obsolete	Removed from specification

Comparison

⚖️ `<center>` vs CSS Centering

Choose the right technique based on what you need to center:

Method	Best for	HTML5 status
`<center>`	Nothing — do not use	Obsolete
`text-align: center`	Inline text, headings, links	Modern CSS standard
`margin: 0 auto`	Fixed-width divs, images, cards	Modern CSS standard
Flexbox	Responsive horizontal and vertical centering	Modern CSS standard

Reference

🧰 Attributes

The <center> tag had no tag-specific attributes. Global attributes could be applied, but CSS classes are the proper approach today:

class / id Global

Hook for CSS selectors—prefer a class with text-align instead of center.

<div class="centered-text">

style Inline

Inline text-align: center works but external CSS is cleaner.

style="text-align: center;"

Element status Obsolete

The entire <center> element is removed from HTML5.

/* use CSS instead */

The entire <center> element is obsolete. Use CSS for all alignment in new projects.

Hands-On

Examples Gallery

Historical <center> patterns plus modern CSS replacements. Legacy examples render for compatibility only—do not use in new code.

Live Preview

How <center> looked historically (browsers still render it for compatibility):

Centered Heading

Center-aligned paragraph text

Centered Text (Historical)

The classic use: wrap a heading and paragraph inside <center> to align them horizontally.

⚠️ Obsolete tag — for learning only.

basic-center.html

<center>
  <h2>Centered Heading</h2>
  <p>Center-aligned paragraph text</p>
</center>

Try It Yourself

📚 Common Use Cases (Historical)

Developers once used <center> for page titles, image alignment, and navigation bars. Today use CSS for all alignment and layout.

Modern Replacement — text-align

Center inline text and headings with text-align: center on a container or element.

text-align-center.css

.centered-text {
  text-align: center;
}

Try It Yourself

Modern Replacement — margin: 0 auto

Center a block-level box (like a card or image) by giving it a width and setting margin: 0 auto.

margin-auto.css

.centered-box {
  width: 240px;
  margin: 0 auto;
  padding: 1rem;
  background: #dbeafe;
}

Try It Yourself

Modern Replacement — Flexbox

Use flexbox when you need to center content both horizontally and vertically inside a container.

flexbox-center.css

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

Try It Yourself

Design

Centering with CSS

Three modern techniques replace the obsolete <center> tag:

text-align Inline text centering

margin: 0 auto Block box centering

flexbox Flexible layout centering

grid place-items: center

centering.css

/* Center text */
.centered-text {
  text-align: center;
}

/* Center a block box */
.centered-box {
  width: 300px;
  margin: 0 auto;
}

/* Flexbox centering */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Live CSS-centered heading

Centered with CSS

No obsolete HTML tags needed.

A11y

♿ Accessibility

Centering is visual layout, not semantic meaning:

Do not use center for importance — alignment does not convey meaning to screen readers.
Avoid centering long paragraphs — left-aligned text is easier to read.
Keep HTML semantic — use headings and paragraphs; style with CSS classes.
Test on mobile — CSS flexbox and grid adapt better than legacy tags.

🧠 How <center> Worked

Author wrapped content in center

Place headings, text, or images inside center tags.

Markup

Browser aligned children

User-agent styles centered inline and block content within the element.

Rendering

CSS replaced presentational tags

HTML5 moved alignment to stylesheets for cleaner, maintainable code.

Evolution

Today: use CSS centering

Learn center for history. Use text-align, margin, or flexbox in all new projects.

Compatibility

Browser Support

Browsers still render <center> for backward compatibility, but the element is obsolete and not part of HTML5.

⚠ Obsolete · Use CSS centering

Legacy rendering only

All major browsers still apply default styles to <center> for old pages, but the tag is removed from the HTML5 specification. Never use it in new projects.

95% Legacy rendering

Google Chrome Legacy render · Obsolete

Legacy render

Mozilla Firefox Legacy render · Obsolete

Legacy render

Apple Safari Legacy render · Obsolete

Legacy render

Microsoft Edge Legacy render · Obsolete

Legacy render

Internet Explorer Supported · EOL

Legacy render

Opera Legacy render · Obsolete

Legacy render

Why center was removed

HTML5 separated structure from presentation—alignment belongs in CSS.

📝

CSS text-align Center inline text and headings inside any container

Replacement

🛠

Flexbox & margin auto Center block boxes and responsive layouts

Modern

<center> tag 95% legacy rendering

Bottom line: Browsers still render <center> for old pages, but it is obsolete. Use CSS centering in all new projects.

Wrap Up

Conclusion

The <center> tag is obsolete HTML—recognize it in old tutorials, but use CSS for centering in real projects. Choose text-align for text, margin: 0 auto for block boxes, and flexbox when you need flexible layout control.

View Examples Gallery Try CSS text-align

Pro Tips

💡 Best Practices

✅ Do

Use CSS text-align: center for text
Use margin: 0 auto for centered block elements
Use flexbox for responsive centering
Learn center only to read legacy HTML

❌ Don’t

Use <center> in new HTML code
Center long paragraphs of body text
Nest multiple <center> tags unnecessarily
Confuse center with the obsolete align attribute

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<center>`

Bookmark these before you ship — they’ll keep your layouts modern and maintainable.

Core concepts

⚠️ 01

Horizontal Alignment

<center> aligned child content to the horizontal center.

Behavior

🚫 02

Obsolete in HTML5

Removed from the spec—not for new projects.

Status

📝 03

text-align Replacement

Use text-align: center for inline text and headings.

CSS

🛠 04

margin: 0 auto

Centers block-level boxes with a defined width.

Layout

🎯 05

Flexbox Centering

Best for responsive horizontal and vertical alignment.

Modern

🌐 06

Legacy Rendering

Browsers still render it for backward compatibility only.

Compatibility

❓ Frequently Asked Questions

What was the HTML center tag used for?

It horizontally centered its child content—text, images, and other elements—within a container.

Is the center tag still valid in HTML5?

No. It is obsolete and removed from the HTML5 specification. Use CSS centering techniques instead.

What replaced the center tag?

CSS text-align: center for text, margin: 0 auto for block elements, and flexbox for flexible layouts.

Does the center tag still work in browsers?

Yes, for backward compatibility. Modern browsers still render it, but you should not use it in new code.

Should beginners use the center tag?

No. Learn CSS centering from the start. Study center only to understand old HTML you may encounter.

Learn the Modern Way

Skip obsolete center. Practice CSS text-align and flexbox centering in the Try It editor.

Try CSS text-align →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML caption Tag HTML cite Tag

HTML <center> Tag

What You’ll Learn

Historical Syntax

Obsolete Status

text-align

margin: 0 auto

Flexbox Centering

Legacy Maintenance

What Was the <center> Tag?

📝 Syntax (Historical)

⚡ Quick Reference

⚖️ <center> vs CSS Centering

🧰 Attributes

Examples Gallery

Live Preview

Centered Heading

Centered Text (Historical)

Centered Heading

📚 Common Use Cases (Historical)

Modern Replacement — text-align

Centered Heading

Modern Replacement — margin: 0 auto

Modern Replacement — Flexbox

Centering with CSS

Centered with CSS

♿ Accessibility

🧠 How <center> Worked

Author wrapped content in center

Browser aligned children

CSS replaced presentational tags

Today: use CSS centering

Browser Support

Legacy rendering only

Why center was removed

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <center>

Horizontal Alignment

Obsolete in HTML5

text-align Replacement

margin: 0 auto

Flexbox Centering

Legacy Rendering

❓ Frequently Asked Questions

🧩 Related HTML Topics

CSS text-align

HTML <caption> Tag

HTML <big> Tag

Try CSS text-align

Learn the Modern Way

About the author

What Was the `<center>` Tag?

⚖️ `<center>` vs CSS Centering

Six truths every developer should know about `<center>`