How to Center Text in CSS – The Complete Beginner’s Guide

Centering text is one of the most common tasks in web design. Whether you want to center a heading, paragraph, button label, or any other text element, CSS provides simple and effective ways to do this.

In this beginner-friendly guide, we’ll explore different methods to center text horizontally and vertically using CSS, with clear examples and tips.

Table of Contents

1. Centering Text Horizontally

Using `text-align: center`

The simplest and most common way to center text horizontally inside a block-level container (like a <div>, <section>, or <p>) is with the text-align property.

.center-text {
  text-align: center;
}

Example:

<div class="center-text">
  <h1>Welcome to My Website</h1>
  <p>This text is centered horizontally.</p>
</div>

What happens?
The text inside the container aligns to the horizontal center.

2. Centering Text Vertically

Vertical centering is a bit trickier because text by default flows from top to bottom. Here are some common ways to center text vertically:

A. Using Flexbox (Best Method)

Flexbox is a modern layout system that makes vertical and horizontal centering straightforward.

.center-vertical {
  display: flex;
  align-items: center;     /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  height: 200px;           /* Container height required */
}

Example:

<div class="center-vertical">
  <p>Centered both vertically and horizontally</p>
</div>

B. Using `line-height` (For Single Line Text)

If you have a container with a fixed height and only one line of text, you can set the line-height equal to the container’s height:

.single-line {
  height: 50px;
  line-height: 50px;
  text-align: center; /* horizontal centering */
}

C. Using CSS Grid

CSS Grid also simplifies centering:

.grid-center {
  display: grid;
  place-items: center; /* centers both horizontally and vertically */
  height: 200px;
}

3. Centering Text Inside Inline or Inline-Block Elements

For inline elements like <span>, centering text isn’t applicable since text flows naturally. However, you can wrap them inside a block element and apply text-align: center.

4. Centering Text in Buttons or Inputs

Text inside buttons or input fields can be centered using text-align: center:

button {
  text-align: center;
}

5. Things to Remember

text-align: center works only for inline content inside block-level containers.
For vertical centering, use Flexbox or Grid for the best cross-browser support and flexibility.
Avoid using outdated or hacky methods like tables or absolute positioning unless necessary.

6. Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
      border: 1px solid #ccc;
      font-family: Arial, sans-serif;
    }
    .text-center {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="text-center">This text is perfectly centered both horizontally and vertically!</p>
  </div>
</body>
</html>

Conclusion

Centering text in CSS can be as simple or advanced as your layout requires. For most cases, using text-align: center handles horizontal alignment, while Flexbox or Grid provides powerful vertical and horizontal centering options.

Experiment with these methods to find what works best for your project.