How to Center Text in CSS

What You’ll Build or Solve

You’ll center headings, paragraphs, and inline content inside block containers using text-align. By the end, you’ll clearly understand what gets centered and what does not.

When This Approach Works Best

Use this approach when you:

• Center headings inside a section.
• Align paragraph text in the middle of a card.
• Center inline elements like links or spans inside a container.

Avoid this approach when you need to center an entire container on the page. That requires layout tools like Flexbox or Grid, which position elements rather than align text.

Prerequisites

• Basic HTML structure
• A CSS file or <style> block

No additional setup is required.

Step-by-Step Instructions

Step 1: Use text-align: center

text-align controls the horizontal alignment of inline content inside a block element.

.container {
  text-align: center;
}

<div class="container">
  <h2>Welcome</h2>
  <p>This paragraph is centered.</p>
</div>

This centers:

• Text inside headings and paragraphs
• Inline elements like <span> and <a>
• Inline-block elements

What to look for: text-align affects the content inside the container, not the container itself.

Step 2: Center Text Inside Specific Elements

You can apply text-align directly to individual text elements.

h1 {
  text-align: center;
}

p {
  text-align: center;
}

Use this approach when only certain text types should be centered.

Step 3: Reset Alignment When Needed

Text alignment is inherited. If a parent centers text, child elements inherit that alignment.

To override it:

.section {
  text-align: left;
}

What to look for: If text is centered unexpectedly, inspect the parent container for inherited alignment.

Examples You Can Copy

Example 1: Center a Heading

<h1 class="title">Centered Title</h1>

.title {
  text-align: center;
}

Example 2: Center Text Inside a Card

<div class="card">
  <p>Profile description goes here.</p>
</div>

.card {
  text-align: center;
}

Example 3: Center Navigation Links

<nav class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

.nav {
  text-align: center;
}

All inline links align in the middle of the navigation container.

Common Mistakes and How to Fix Them

Mistake 1: Using margin: auto to Center Text

You might write:

.text {
  margin: auto;
}

Why it breaks: margin: auto centers block elements, not text inside them.

Correct approach:

.text {
  text-align: center;
}

Mistake 2: Expecting text-align to Center a Block Element

You might write:

.container {
  text-align: center;
}

Why it breaks: This does not move the container itself. It only aligns its inline content.

Correct approach: To center the container, use Flexbox or Grid on the parent element.

Mistake 3: Unexpected Alignment Due to Inheritance

You might see centered text even though you did not set it on that element.

Why it happens: text-align is inherited from parent elements.

Correct approach:

.child {
  text-align: left;
}

Override inherited values where necessary.

Troubleshooting

If the text is not centered, confirm your rule targets the correct parent container.

If text remains left-aligned, check for a more specific selector overriding your rule.

If only some elements center, confirm they are inline or inline-block elements.

If alignment appears inconsistent, inspect parent containers for inherited values.

Quick Recap

• Use text-align: center to center text horizontally.
• Apply it to the parent container of the text.
• Remember that alignment is inherited.
• Do not use margin tricks for text alignment.
• Use layout systems only when centering elements, not text content.