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 align-items: center and horizontally with justify-content: center.

Important detail for text blocks

Your example contains multiple lines of text inside a fixed-height box. That means you need a technique that works well for multi-line content. Flexbox and Grid are good for this. The older line-height trick only works well for a single line of text.

Common options

• Flexbox: best for most modern layouts
• Grid: also simple and powerful
• display: table-cell: older but valid in some legacy code
• line-height: only for single-line text

So the core lesson is: vertical-align is not the right tool for vertically centering text inside a standard div.

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.

Using CSS Grid

.testimonialText {
  display: grid;
  place-items: center;
  width: 150px;
  height: 309px;
  text-align: center;
  padding: 1em;
  box-sizing: border-box;
}

This is another clean modern solution. place-items: center centers content both vertically and horizontally.

Older approach with table-cell

.testimonialText {
  display: table-cell;
  vertical-align: middle;
  width: 150px;
  height: 309px;
  text-align: center;
  padding: 1em;
}

This works because vertical-align applies to table-cell layout.

Single-line-only approach

.buttonLabel {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

This works only when the content is a single line. It is not a good fit for long paragraphs like your example.

Improved version of your original example

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em;
  box-sizing: border-box;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

This is the most effective solution for this kind of multi-line text box.

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.
6. align-items: center places the item in the center along the cross axis.
   • This means vertical centering.
7. text-align: center ensures the text itself is centered within its own inline content area.

Compare with the broken version

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

Here is what happens:

1. The element is still a normal block div.
2. vertical-align: middle is set.
3. Because the div is not acting like an inline element or table cell, the property does not vertically center the text.
4. The text stays at the top of the box, following normal document flow.

That is why the original code appears not to work.

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:

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

Then used like this:

<div class="card center-content">Centered content</div>

Legacy support patterns

Older codebases may still use display: table-cell because it predates Flexbox. You may see it during maintenance work, but for new code, Flexbox or Grid is usually preferred.

Text alignment vs item alignment

A frequent real-world pattern is using both:

• justify-content / align-items to place the content box
• text-align to align the text inside that box

These solve different layout problems and are often used together.

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

Broken code:

.box {
  width: 150px;
  height: 309px;
  padding: 1em;
}

Problem:

• The total rendered size becomes larger unless box-sizing: border-box is used.

Fix:

.box {
  width: 150px;
  height: 309px;
  padding: 1em;
  box-sizing: border-box;
}

4. Confusing text-align with vertical centering

Broken assumption:

.box {
  text-align: center;
}

Why it fails:

• text-align only controls horizontal alignment of inline content.
• It does not move text to the vertical middle.

5. Centering content that is taller than the container

If the text is very long, even correct centering can look odd or overflow.

Possible fix:

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

6. Applying flex properties without display: flex

Broken code:

.box {
  align-items: center;
  justify-content: center;
}

Why it fails:

• Those properties only work on flex or grid containers.

Fix:

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

Flexbox vs Grid

Which should you use?

• Use Flexbox for most vertical centering tasks.
• Use Grid if you already use grid layout or want a very compact centering rule.
• Use line-height only for single-line text.
• Use table-cell only when working in older code or special legacy layouts.

/* 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.
• If content may be too long, consider overflow: auto.

Quick fix for the original problem

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em;
  box-sizing: border-box;
}

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?

Yes, it still works, but Flexbox and Grid are usually preferred in new projects.

• 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.