HTML <center> Tag – Complete Guide for Beginners
Introduction
When learning HTML, you’ll come across many tags that were commonly used in older websites but are no longer recommended today. One such tag is the HTML <center> tag.
In the early days of web development, developers used the <center> tag to align text, images, tables, and other content in the middle of a webpage. It was simple and easy to use.
However, modern web development follows a different approach. Instead of using HTML for presentation, developers use CSS for styling and alignment. Because of this, the <center> tag has been deprecated in HTML5.
Even though it’s outdated, understanding the <center> tag helps beginners learn how HTML evolved and why modern web development practices exist.
👉 Learn HTML basics here:
https://w3htmlschool.com/html/
👉 Learn HTML elements here:
https://w3htmlschool.com/html-elements-a-complete-guide/
What Is the HTML Center Tag
The <center> tag was used to horizontally center content on a webpage, but it is now deprecated in HTML5.
No. The <center> tag is deprecated in HTML5 and should be replaced with CSS alignment techniques.
Modern websites use CSS properties such as text-align: center and Flexbox instead of the <center> tag.
The <center> tag was removed because presentation should be handled by CSS rather than HTML structure.
<center>
Welcome to My Website
</center>The browser would display the text in the center of the page.
Basic Syntax of <center>
<center>
This text is centered.
</center>Output Explanation
The text appears centered horizontally on the webpage.
How It Works
<center>starts centered content- Content inside becomes centered
</center>ends the centered section
How the <center> Tag Worked
The browser automatically centered all content placed inside the tag.
Example:
<center>
<h1>Welcome</h1>
<p>This paragraph is centered.</p>
</center>Output
- Heading centered
- Paragraph centered
- Entire block aligned in the middle
What Can Be Centered Using center?
Using <center>, you could center:
-
Text
-
Images
-
Headings
-
Tables
-
Forms
Example:
Why is the <center> Tag Deprecated?
Why is the <center> tag deprecated?
The <center> tag is deprecated because modern web development separates content structure (HTML) from presentation (CSS).
HTML is meant to describe content.
CSS is meant to control appearance.
Using the <center> tag mixes structure and design together.
Modern standards encourage:
HTML
For content structure
CSS
For styling and layout
Problems with the <center> Tag
The <center> tag had several limitations.
1. Poor Separation of Concerns
HTML should define content, not styling.
2. Limited Flexibility
It could only center content horizontally.
3. Harder Maintenance
Large websites became difficult to manage.
4. Not HTML5 Compliant
Modern HTML validators show warnings.
Examples of the <center> Tag
Example 1: Centering Text
<center>
Hello World
</center>Example 2: Centering an Image
<center>
<img src="logo.png" alt="Logo">
</center>Example 3: Centering Multiple Elements
<center>
<h1>My Website</h1>
<p>Welcome to my site.</p>
</center>Modern Alternative: CSS text-align
Today, the recommended method is:
<p style="text-align:center;">
This text is centered.
</p>Why This is Better
- Cleaner code
- More flexibility
- HTML5 compliant
Modern Alternative: Internal CSS
<style>
.center-text {
text-align: center;
}
</style>
<p class="center-text">
Centered text
</p>Modern Alternative: Centering Div Elements
<div style="text-align:center;">
Welcome to my website
</div>Modern Alternative: Flexbox
Flexbox is the most popular modern method.
<style>
.container {
display: flex;
justify-content: center;
}
</style>
<div class="container">
<p>Hello World</p>
</div>Benefits of Flexbox
- Horizontal centering
- Vertical centering
- Responsive design
- Modern browser support
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-alignfor 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.
The HTML <center> tag played an important role in early web development, but modern websites rely on CSS for alignment and layout.
As a beginner, it’s useful to understand the <center> tag because you’ll encounter it in older tutorials and legacy websites. However, you should avoid using it in new projects.
Key Takeaways
- The
<center>tag centers content horizontally. - It is deprecated in HTML5.
- CSS is the modern replacement.
- Use
text-align, Flexbox, or Grid instead. - Follow modern web development best practices.
Learning the history of HTML tags like <center> helps you understand why today’s web standards exist and how professional developers build modern websites.
👉 Learn more HTML tags and attributes here:
https://w3htmlschool.com/html-tags-and-attributes-complete-guide-with-examples/