CssHow-ToBeginner · 3 min read

How to Center Text in CSS: Simple Methods Explained

To center text horizontally in CSS, use the text-align: center; property on the container element. For vertical centering, use Flexbox with display: flex;, justify-content: center;, and align-items: center; on the container.

📐

Syntax

Horizontal centering: Use text-align: center; on the parent container to center inline text inside it.

Vertical and horizontal centering: Use Flexbox on the container with display: flex;, then center content with justify-content: center; (horizontal) and align-items: center; (vertical).

css

/* Horizontal centering syntax */
.container {
  text-align: center;
}

/* Vertical and horizontal centering syntax with Flexbox */
.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;    /* vertical */
  height: 200px; /* needed for vertical centering */
}

💻

Example

This example shows text centered horizontally using text-align and centered both horizontally and vertically using Flexbox.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Center Text Example</title>
<style>
  .horizontal-center {
    text-align: center;
    border: 2px solid #4CAF50;
    padding: 20px;
    margin-bottom: 20px;
  }
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    border: 2px solid #2196F3;
    color: white;
    background-color: #2196F3;
  }
</style>
</head>
<body>
  <div class="horizontal-center">
    This text is centered horizontally.
  </div>
  <div class="flex-center">
    This text is centered both horizontally and vertically.
  </div>
</body>
</html>

Output

A webpage with two boxes: the first box has green border and text centered horizontally; the second box has blue background and border with white text centered horizontally and vertically inside a taller box.

⚠️

Common Pitfalls

Using text-align: center; only centers inline content horizontally, not vertically.
Vertical centering with Flexbox requires the container to have a fixed height or fill available space.
Applying text-align: center; on the text element itself (like a p) won't work if the parent container's width is not full or constrained.
Using line-height for vertical centering works only for single-line text and is not flexible.

css

/* Wrong: text-align does not center vertically */
.container {
  text-align: center;
  height: 150px;
  border: 1px solid black;
}

/* Right: use Flexbox for vertical centering */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  border: 1px solid black;
}

📊

Quick Reference

Center text horizontally: text-align: center;

Center text vertically and horizontally: Use Flexbox with display: flex;, justify-content: center;, and align-items: center; on the container.

Remember: Vertical centering needs container height set.

✅

Key Takeaways

Use text-align: center; to center text horizontally inside its container.

For vertical centering, use Flexbox with display: flex;, justify-content: center;, and align-items: center;.

Set a height on the container when vertically centering with Flexbox.

Avoid using text-align alone for vertical centering—it only works horizontally.

Test your layout in the browser to ensure text is centered as expected.