Centering an <h1> (or any heading) in CSS is a common design requirement. Whether you need to center it horizontally, vertically, or both, CSS provides multiple techniques to achieve this.

In this blog, we’ll explore:
✅ How to center <h1> horizontally
✅ How to center <h1> vertically
✅ How to center <h1> both horizontally and vertically

1. Centering an <h1> Horizontally

The most common way to center an <h1> horizontally is by using the text-align property.

Example 1: Using text-align: center; (Simple Method)

h1 {
    text-align: center;
}

<h1>Welcome to My Website</h1>

✅ Why does this work?

• The text-align: center; property makes inline and block-level text centered within its parent container.

Example 2: Using Flexbox for Centering Horizontally

.container {
    display: flex;
    justify-content: center;
}

<div class="container">
    <h1>Welcome</h1>
</div>

✅ Why does this work?

• display: flex; enables Flexbox.
• justify-content: center; centers the <h1> horizontally.

---

2. Centering an <h1> Vertically

To center an <h1> vertically, you need to define its container’s height and use one of these methods:

Example 1: Using Flexbox (Best Method)

.container {
    display: flex;
    align-items: center;
    height: 100vh; /* Full viewport height */
}

<div class="container">
    <h1>Welcome</h1>
</div>

✅ Why does this work?

• align-items: center; aligns the <h1> vertically in the container.

Example 2: Using position: absolute;

.container {
    position: relative;
    height: 100vh;
}

h1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

✅ Why does this work?

• top: 50%; moves the <h1> halfway down.
• transform: translateY(-50%); corrects the alignment by shifting it up by half its height.

---

3. Centering an <h1> Both Horizontally and Vertically

For perfect centering, you can use Flexbox or CSS Grid.

Example 1: Using Flexbox (Best Practice)

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

<div class="container">
    <h1>Welcome</h1>
</div>

✅ Why does this work?

• justify-content: center; centers horizontally.
• align-items: center; centers vertically.

Example 2: Using CSS Grid

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

✅ Why does this work?

• place-items: center; centers both horizontally and vertically in a single line.

---

4. Bonus: Centering an <h1> in a Responsive Layout

If your heading needs to remain centered across different screen sizes, use Flexbox or CSS Grid, which automatically adjust based on content and screen size.

Responsive Example

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh; /* Adjust height for responsiveness */
    padding: 20px; /* Prevent overflow */
    text-align: center; /* Ensures text remains centered */
}

✅ Why is this useful?

• Works well on both desktop and mobile screens.
• Avoids content overflow issues with padding.

---

Conclusion

Centering an <h1> in CSS is simple with the right techniques.

Best Methods Based on Use Case:

✅ For horizontal centering → Use text-align: center; or Flexbox.
✅ For vertical centering → Use align-items: center; in Flexbox.
✅ For full centering (horizontal + vertical) → Use Flexbox (display: flex;) or CSS Grid (display: grid;).

With these techniques, your headings will always be perfectly centered.