HTML <center> Tag

What is the <center> Tag?

The <center> tag was used in HTML to center-align content (like text or images) on a webpage.

Here’s how it looks in action:

<center>
  <h1>This is centered!</h1>
</center>

Simple, right? The text “This is centered!” will appear in the middle of the page.

But Wait… Is It Still Used?

Short answer: Nope, it’s outdated.
The <center> tag was officially deprecated in HTML4 and is not supported in HTML5. This means you can use it, but it’s no longer considered good practice. Modern web design uses CSS for centering instead.

Why was it retired?

• It doesn’t separate content from presentation. (HTML is for structure, CSS is for styling!)
• It makes your code messy and harder to maintain.

How to Center Content the Modern Way

Instead of <center>, use CSS. Let’s look at some easy and modern ways to center things.

1. Center Text

Use the text-align property:

<div style="text-align: center;">
  <h1>This is centered!</h1>
</div>

Or, in an external CSS file:

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

<div class="center-text">
  <h1>This is centered!</h1>
</div>

2. Center a Block Element (e.g., a Div)

Use margin and width:

<div style="width: 50%; margin: 0 auto; text-align: center;">
  <p>This block is centered!</p>
</div>

3. Center Anything with Flexbox

Flexbox is a CSS superhero for centering! 🦸

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <p>This is centered both horizontally and vertically!</p>
</div>

4. Center with Grid Layout

Another modern way to center:

<div style="display: grid; place-items: center; height: 100vh;">
  <p>Grid magic for centering!</p>
</div>

Why CSS is Better than <center>

• Flexibility: CSS gives you more control over spacing, alignment, and responsiveness.
• Cleaner Code: Keeps your HTML structure neat and separate from styling.
• Future-Proof: Browsers will always support CSS, while outdated tags like <center> may stop working over time.

A Quick Look Back at <center>

Sure, the <center> tag was great back in the day when web design was simpler. But modern websites demand better tools to handle complex layouts and responsiveness. So, while the <center> tag deserves a round of applause for its service, it’s time to let CSS take the stage.

TL;DR

• The <center> tag centers content but is deprecated and should be avoided.
• Use CSS (e.g., text-align, Flexbox, or Grid) for centering instead.
• Your code will be cleaner, more flexible, and easier to maintain.