How to Vertically Align Text in a div with CSS

By the end of this page, you will understand why vertical-align: middle does not work the way many beginners expect on a normal div, and you will learn the most common CSS techniques for vertical centering, including Flexbox, Grid, line-height, and table-cell-based solutions.

In CSS, vertical alignment depends on the display context of an element.

Many developers try this first:

vertical-align: middle;

However, vertical-align does not vertically center content inside a normal block-level div. It mainly works with:

• inline or inline-block elements
• table cells
• elements participating in table layout

A regular div is usually a block element, so vertical-align will not center its internal text vertically.

Why this matters

Vertical centering is a very common layout task in real interfaces:

• centering button labels
• aligning text inside cards
• placing content in banners or hero sections
• centering loading messages or empty states

If you use the wrong CSS property, the layout may appear broken or inconsistent.

The modern solution

For most cases, the best approach today is Flexbox:

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

This centers content vertically with and horizontally with .

Think of CSS layout like arranging items inside different kinds of containers.

• A normal div is like a plain box on a shelf.
• vertical-align is a rule meant for items that behave like text in a line or cells in a table.
• If your div is just a regular box, that rule is like trying to use table manners in a cardboard box—it does not apply.

Flexbox, on the other hand, turns the div into a container designed to arrange its contents. It is like placing the text inside a box with built-in alignment controls:

• justify-content controls left/right placement in a row
• align-items controls top/middle/bottom placement

So instead of asking the text to align itself, you ask the container to place its content in the center.

Modern approach with Flexbox

.testimonialText {
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: center; /* horizontal centering */
  width: 150px;
  height: 309px;
  text-align: center;
  padding: 1em;
  box-sizing: border-box;
}

<div class="testimonialText">
  Center this text vertically and horizontally.
</div>

Explanation

• display: flex makes the div a flex container.
• align-items: center centers the content vertically.
• justify-content: center centers the content horizontally.
• text-align: center centers the text inside each line.
• box-sizing: border-box helps keep padding inside the declared width and height.

Consider this example:

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 300px;
  text-align: center;
  border: 1px solid #ccc;
}

<div class="box">Hello world</div>

What happens step by step

1. The browser creates a div with class box.
2. width: 300px and height: 200px give it a fixed size.
3. display: flex changes the layout model from normal block layout to flex layout.
4. The text inside becomes a flex item.
5. justify-content: center places that item in the center along the main axis.
   • With the default flex-direction: row, this means horizontal centering.

Vertical centering appears in many common UI patterns.

Cards and testimonials

Your example is a classic one: a fixed-height testimonial card with text that should sit nicely in the middle.

Buttons and badges

A short label often needs to sit exactly in the middle of a button or badge.

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

Empty states

Applications often show messages like “No data found” centered in a panel.

Loading screens

Spinners and text are frequently centered vertically and horizontally in a container.

Modals and dialogs

Dialog content may need vertical alignment for a polished appearance.

Hero sections and banners

Landing pages often center headings and text inside large areas.

Dashboard widgets

Small statistic cards often center values and labels for clean visual balance.

In real projects, developers usually choose a vertical alignment technique based on the type of content.

Common modern pattern: Flexbox container

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

This is common because it is:

• easy to read
• reliable for multi-line content
• flexible when adding icons, buttons, or other elements later

Guarding against overflow

If the container has a fixed height and the text may be long, developers often combine centering with overflow handling:

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

This prevents content from spilling out unexpectedly.

Using padding with box-sizing

A common pattern is:

.card {
  box-sizing: border-box;
  padding: 1rem;
}

Without this, the real rendered size can become larger than expected.

Component-based CSS

In real codebases, alignment rules are often placed in reusable utility classes:

1. Using vertical-align on a normal div

Broken code:

.box {
  height: 200px;
  vertical-align: middle;
}

Why it fails:

• vertical-align does not vertically center content inside a block-level div.

How to fix it:

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

2. Using line-height for multi-line text

Broken code:

.box {
  height: 200px;
  line-height: 200px;
}

Why it fails:

• It may appear to work for one line.
• It breaks badly when the text wraps onto multiple lines.

Use Flexbox or Grid for paragraphs.

3. Forgetting that padding affects box size

/* Best modern default */
.box {
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
}

/* Modern alternative */
.box {
  display: grid;
  place-items: center;
}

/* Older method */
.box {
  display: table-cell;
  vertical-align: middle;
}

/* Single line only */
.box {
  height: 40px;
  line-height: 40px;
}

Rules to remember

• vertical-align does not center text inside a normal block div.
• text-align affects horizontal text alignment only.
• Flexbox and Grid work well for multi-line content.
• Add box-sizing: border-box when using fixed dimensions and padding.

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

Because a normal div uses block layout, and vertical-align is mainly for inline elements and table cells.

What is the best way to vertically center text in a div?

In modern CSS, use Flexbox:

display: flex;
align-items: center;

Can I use line-height to vertically center text?

Yes, but only for a single line of text. It is not suitable for paragraphs or wrapped text.

Should I use Flexbox or Grid for vertical centering?

Both work well. Flexbox is often the most common default choice. Grid is also excellent for simple centering.

Does text-align: center vertically center text?

No. It only centers text horizontally.

What if my text is too long for the container?

Use overflow handling such as:

overflow: auto;

or reconsider using a fixed height.

Is display: table-cell still valid?

• Flexbox — The most common modern way to align and distribute content inside containers.
• CSS Grid — Another modern layout system that can center content easily.
• Box model — Important for understanding how padding and fixed dimensions affect layout.
• text-align — Related because it controls horizontal text alignment, which is often confused with vertical alignment.
• line-height — Useful for single-line vertical centering, but limited.
• display property — Critical because alignment behavior depends on whether an element is block, flex, grid, inline, or table-cell.
• Positioning in CSS — Relevant because the original code uses position: absolute.
• Overflow in CSS — Important when vertically centered content can exceed the container height.