Tag center

The <center> tag was used in older versions of HTML to center-align content such as text, images, or other elements horizontally within its parent container.

Example (in legacy HTML):

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

📍 Result: The text would appear centered within its parent container.

---

⚠️ Why It’s Deprecated

• The <center> tag was removed in HTML5 because CSS provides a more flexible and powerful way to handle alignment.
• It was non-semantic, meaning it didn’t describe the content in a meaningful way — it only altered the appearance.

---

✅ Modern Alternative: CSS

Instead of using the <center> tag, you can now use CSS to achieve the same effect:

<style>
  .center-text {
    text-align: center;
  }
</style>

<p class="center-text">This text is now centered using CSS!</p>

For Centering a Block Element (like a div or image):

<style>
  .center-block {
    margin-left: auto;
    margin-right: auto;
    width: 50%;  /* Or any width you want */
  }
</style>

<div class="center-block">
  <p>This entire div is centered.</p>
</div>

---

✅ Centering Flexbox (Most Powerful Way!)

Another modern and robust approach is to use Flexbox. It’s perfect for centering both horizontally and vertically.

<style>
  .flex-container {
    display: flex;
    justify-content: center;  /* Horizontal centering */
    align-items: center;      /* Vertical centering */
    height: 200px;            /* Or any height */
  }
</style>

<div class="flex-container">
  <p>This text is centered both horizontally and vertically using Flexbox!</p>
</div>

---

✅ Summary

Feature	<center>	CSS Alternative
Support in HTML5	❌ Deprecated	✅ Fully supported
Alignment	Centers content horizontally	text-align: center;
Flexibility	Limited	Flexible, powerful
Semantics	❌ Non-semantic, just visual	✅ Describes layout purpose

---

💡 Tip

For modern web design, always use CSS for alignment and layout, as it’s more flexible, powerful, and supported by all modern browsers.