Home » How to Center Text in HTML: Complete Step-by-Step Guide with Examples
how to center text in html ?

How to Center Text in HTML: CSS & HTML Methods Explained

Text alignment is one of the most fundamental parts of web design. Whether you’re building a blog, landing page, or web app, knowing how to center text in HTML helps create clean, visually appealing layouts.

Centered text is commonly used for:

  • Headings and titles
  • Buttons and call-to-actions
  • Cards and UI components
  • Hero sections

If you’re a beginner, you might think there’s only one way to center text—but in reality, there are multiple methods, each suited for different scenarios.

In this complete guide, you’ll learn:

  • How to center text in HTML using simple CSS
  • Advanced techniques using Flexbox and Grid
  • How to center text both vertically and horizontally
  • Common mistakes and best practices

This article is based on your provided content and expanded into a full SEO-optimized guide.

How do you center text in HTML?

You can center text in HTML using CSS properties like text-align: center, Flexbox, or Grid. The most common method is using text-align: center for horizontal alignment.

How do you center text in HTML?

You can center text using CSS like text-align: center; or modern layout methods like Flexbox.

Method 1: Using text-align: center (Most Important)

<p style="text-align: center;">Centered Text</p>

Explanation

This is the simplest and most widely used method to center text in HTML.

  • It works for inline and block-level text
  • Applies horizontal alignment only
  • Best for paragraphs, headings, and simple layouts

 Example

<h1 style="text-align: center;">Welcome to My Website</h1>

This centers the heading across the page.

Method 2: Using CSS Class

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

<p class="center">Centered Text</p>

Why Use This?

Instead of repeating inline styles, you can:

  • Keep your code clean
  • Reuse styles across multiple elements
  • Improve maintainability

 Real Use Case

<h2 class="center">About Us</h2>
<p class="center">We provide web development tutorials.</p>

Method 3: Center Text Using Flexbox

<div style="display: flex; justify-content: center;">
  <p>Centered Text</p>
</div>

Explanation

Flexbox is a modern CSS layout system.

  • display: flex enables flexbox
  • justify-content: center centers horizontally

When to Use

  • Centering content inside containers
  • Layout design (cards, sections)
  • Responsive UI

Method 4: Center Text Vertically & Horizontally

<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
  <p>Centered</p>
</div>

Explanation

This method solves a common problem:
Vertical + horizontal centering

  • justify-content: center → horizontal
  • align-items: center → vertical
  • height → required for vertical alignment
How to vertically center text in HTML? Use Flexbox with align-items: center and justify-content: center to align text both vertically and horizontally.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Method 5: Using CSS Grid

<div style="display: grid; place-items: center;">
  <p>Centered Text</p>
</div>

Explanation

CSS Grid is another powerful layout system.

  • place-items: center = vertical + horizontal centering
  • Cleaner than Flexbox for simple centering

Best For

  • Modern layouts
  • Minimal code solutions
  • Responsive design
<h1 style="text-align: center;">
  Centered Heading
</h1>

Method 6: Deprecated <center> Tag

 
<center>Centered Text</center>

Why Not Use It?

  • This tag is deprecated in HTML5
  • Not supported in modern standards
  • Poor for SEO and accessibility

Always use CSS instead

Comparison Table

MethodUse CaseDifficulty
text-alignSimple textEasy
FlexboxLayout controlMedium
GridAdvanced layoutsMedium
center tagDeprecatedNot recommended

Real-World Examples

Centering Headings

<h1 style="text-align: center;">My Blog</h1>

Centering Buttons

<div style="text-align: center;">
  <button>Click Me</button>
</div>

Centering Content in Cards

<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
  <p>Card Content</p>
</div>

Common Mistakes

Using <center> Tag

Avoid outdated HTML practices

Forgetting Parent Container

Flexbox and Grid require a parent container

Confusing Vertical vs Horizontal

  • text-align → horizontal only
  • Flexbox/Grid → both

Not Setting Height

Vertical centering needs height

Best Practices

  • Use CSS instead of HTML attributes
  •  Prefer Flexbox or Grid for layouts
  • Keep styles reusable with classes
  • Write clean, readable code
  • Test responsiveness

Internal Resources (Recommended Reading)

FAQs: HTML Text Centering

How do I center text in HTML?

Use CSS:

text-align: center;

What is the best way to center text?

text-align: center for simple text
Flexbox/Grid for layouts

Can I center text vertically?

Yes, using Flexbox:

 
align-items: center;

Is the <center> tag still valid?

 No, it is deprecated in HTML5

How to center text in a div?

div {
text-align: center;
}
 

Related Posts

Scroll to Top