Here’s a complete, detailed guide on how to center a header in HTML, including multiple methods using HTML attributes, CSS, and modern best practices.
1. Centering Using HTML <center> Tag (Deprecated)
<center>
<h1>Welcome to My Website</h1>
</center>
Notes:
<center>works in older browsers but is deprecated in HTML5.- Not recommended for modern web development. Use CSS instead.
2. Centering Using Inline CSS
<h1 style="text-align: center;">Welcome to My Website</h1>
Explanation:
text-align: center;centers inline content inside the element.- Quick method for single elements, but not ideal for large projects.
3. Centering Using Internal or External CSS
Internal CSS
<head>
<style>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
External CSS
/* style.css */
h1 {
text-align: center;
}
<link rel="stylesheet" href="style.css">
<h1>Welcome to My Website</h1>
Advantages:
- Reusable for multiple headers
- Keeps HTML clean
4. Centering Using Flexbox (Modern Approach)
If you want the header to be centered both horizontally and vertically:
<style>
header {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 150px;
background-color: #007BFF;
color: white;
}
</style>
<header>
<h1>Welcome to My Website</h1>
</header>
Explanation:
display: flexenables flexible layoutjustify-content: center→ horizontal centeringalign-items: center→ vertical centering
5. Centering Using Text Container
Wrap the header in a <div> and center the text:
<div style="text-align: center;">
<h1>Welcome to My Website</h1>
</div>
- Useful for grouping multiple elements and centering them together
6. Centering Multiple Headers
<div class="centered">
<h1>Title 1</h1>
<h2>Subtitle</h2>
</div>
<style>
.centered {
text-align: center;
}
</style>
- All headers inside
.centeredwill be horizontally centered
7. Summary of Methods
| Method | Code Example | Notes |
|---|---|---|
HTML <center> | <center><h1>Text</h1></center> | Deprecated, avoid in modern HTML |
| Inline CSS | <h1 style="text-align:center;">Text</h1> | Quick but not reusable |
| Internal/External CSS | h1 { text-align: center; } | Clean, reusable |
| Flexbox | display:flex; justify-content:center; align-items:center; | Centers horizontally & vertically |
| Div container | <div style="text-align:center;"><h1>Text</h1></div> | Groups multiple elements |
✅ Best Practice: Use CSS text-align: center; for horizontal centering and Flexbox for both horizontal and vertical centering. Avoid the <center> tag.
Other Courses:
