How to Vertically Center Text with CSS

By the end of this page, you will understand how vertical centering works in CSS, why it can be confusing at first, and which techniques to use in different situations. You will learn the modern flexbox approach, when line-height works, and how to choose the right method for single-line and multi-line text.

Vertical centering in CSS means placing content in the middle of a container along its vertical axis.

This is a very common layout task, but beginners often find it tricky because CSS was not originally designed with simple vertical alignment for block elements in mind. Some properties sound like they should help, such as vertical-align, but they do not work the way many people expect on normal div elements.

The best modern solution is usually Flexbox.

With Flexbox, you can tell a container to align its child content both horizontally and vertically:

#box {
  display: flex;
  justify-content: center;
  align-items: center;
}

Why this matters in real programming:

• Centering text in buttons, cards, badges, banners, and modals
• Positioning loading messages and empty-state messages
• Building reusable UI components that stay aligned at different sizes
• Creating layouts that work for both short and long text

A key point is that the best technique depends on the content:

• Single-line text: line-height can work
• Single-line or multi-line text: flexbox is usually better
• Complex layouts: grid can also help

For modern CSS, flexbox is the most practical and reliable answer.

Think of the div as a box in a room.

• Horizontal centering means moving the text left or right until it sits in the middle.
• Vertical centering means moving the text up or down until it sits halfway between the top and bottom.

With older CSS, this often felt like trying to balance an object by guessing distances.

With Flexbox, the container becomes a smart alignment system. You tell the box:

• justify-content: center → center things along one axis
• align-items: center → center things along the other axis

So instead of manually calculating spacing, you let CSS do the positioning for you.

Modern solution with Flexbox

<div id="box">Lorem ipsum dolor sit</div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  color: #fff;
  font-size: 48px;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;
}

Why this works

• display: flex turns the div into a flex container
• justify-content: center centers content on the main axis
• align-items: center centers content on the cross axis

In a default flex row layout, this combination centers the text both vertically and horizontally.

Single-line text with line-height

If the text is only one line, you can set equal to the container height:

Consider this example:

<div id="box">Hello</div>

#box {
  height: 170px;
  width: 270px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  color: white;
}

Here is what happens step by step:

1. The browser creates a div with the text Hello inside it.
2. height: 170px gives the container vertical space.
3. width: 270px gives the container horizontal space.
4. display: flex changes the layout behavior of the container.
5. The text becomes a flex item inside the container.
6. justify-content: center moves the content to the middle on the main axis.
7. align-items: center moves the content to the middle on the cross axis.
8. The result is text centered inside the box.

If the text becomes longer and wraps to another line, Flexbox still keeps the whole text block centered, which is one reason it is preferred over .

Vertical centering is used in many everyday UI elements:

• Buttons: center button labels inside fixed-height buttons
• Cards: center short messages inside a panel
• Hero sections: place headings in the middle of a banner
• Loaders and empty states: center text like Loading... or No results
• Navigation items: align text within menu bars
• Profile badges and counters: center numbers or initials inside boxes or circles

Example: a call-to-action button

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 0 16px;
}

This keeps the label centered even if the font or content changes.

In real projects, developers usually prefer Flexbox or Grid because they are predictable and easy to maintain.

Common patterns include:

Reusable centered components

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

This utility class can be reused across many components.

Guarding against variable content length

When text might wrap, developers avoid line-height tricks and use Flexbox instead.

Centering icons and text together

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

This works well for pills, badges, and status labels.

Responsive layouts

Flexbox makes it easier to keep items centered across screen sizes without recalculating heights.

Component libraries

UI libraries often use utility classes like:

• display: flex
• align-items: center
• justify-content: center

1. Using vertical-align on a normal div

Many beginners try this:

#box {
  vertical-align: middle;
}

This usually does not vertically center text inside a block-level div.

Why

vertical-align mainly applies to:

• inline elements
• inline-block elements
• table cells

It is not the right tool for most div centering tasks.

2. Using line-height for multi-line text

Broken approach for wrapping text:

#box {
  height: 170px;
  line-height: 170px;
}

If the text becomes two lines, spacing looks wrong.

Avoid it by using Flexbox

#box {
  display: flex;
  align-items: center;
  : center;
}

Flexbox vs line-height

/* Best general solution */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Single-line text only */
.container {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

/* Grid alternative */
.container {
  display: grid;
  place-items: center;
}

Quick rules

• Use flexbox for reliable vertical centering
• Use line-height only for single-line text
• Do not rely on vertical-align for standard div centering
• Make sure the container has height
• In flex row layout:
  • justify-content = horizontal
  • align-items = vertical

Good default for this question

How do I vertically center text in a div with CSS?

The most common modern solution is to use Flexbox:

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

Why does vertical-align: middle not work on my div?

Because vertical-align does not work the way many expect on normal block-level elements. It is mainly for inline elements and table cells.

What is the easiest way to center single-line text vertically?

Set line-height equal to the container height. This is simple, but only reliable for one line of text.

Is Flexbox better than line-height for vertical centering?

Yes, in most cases. Flexbox works better with multi-line content and is more flexible for real layouts.

Can CSS Grid center text vertically too?

Yes. You can use:

display: grid;
place-items: center;

This centers content both vertically and horizontally.

Do I need a fixed height to vertically center text?

• Flexbox — the main modern layout system for centering and alignment
• CSS Grid — another layout system that can center content easily
• line-height — useful for single-line vertical centering
• text-align — handles horizontal text alignment, not vertical alignment
• vertical-align — often confused with vertical centering, but works differently
• Box model — helps explain how height, padding, and content space affect alignment
• Responsive design — important because centered content should still work on different screen sizes