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 vertically center text inside a normal div, and you will learn the main CSS techniques used to center content vertically, especially modern Flexbox-based solutions.

In CSS, vertical centering depends on how the element participates in layout. A common beginner mistake is assuming that vertical-align: middle works on every element. It does not.

vertical-align mainly affects:

• inline elements
• inline-block elements
• table cells

A normal div is a block-level element, so vertical-align usually has no effect on its inner text layout.

If you want to vertically center content inside a div, the best method depends on the situation:

• Flexbox: best general-purpose modern solution
• Grid: also simple and powerful
• line-height: useful for a single line of text
• table-cell: older technique, sometimes still seen in legacy code
• absolute positioning + transform: useful in special layout cases

Why this matters in real programming:

• Centering text is common in buttons, cards, hero sections, banners, modals, and empty states.
• Using the wrong property can waste time because the CSS appears valid but has no visible effect.
• Knowing which layout system you are using helps you choose the correct centering technique quickly.

Think of CSS layout like different kinds of containers.

• A normal div is like a regular box on a shelf.
• vertical-align is a rule for how items sit next to each other in a row, not how content floats up and down inside a box.
• Flexbox turns the box into a smart container that can place its contents in the center automatically.

So instead of telling the text to "align vertically," you usually tell the container how to arrange its children.

A good mental shortcut is:

• Need to center content inside a box? Use Flexbox.
• Need to align inline items beside each other? vertical-align may help.

Modern recommended approach: Flexbox

.testimonialText {
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: center;  /* horizontal centering */

  width: 150px;
  height: 309px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em;
}

<div class="testimonialText">
  Center this text inside the box.
</div>

Why it works

• display: flex makes the div a flex container.
• align-items: center centers content vertically.
• justify-content: center centers content horizontally.

This is the most common modern solution.

For a single line of text: line-height

If the box contains only one line, you can match line-height to the element height.

.singleLineBox {
  height: 60px;
  line-height: 60px;
  text-align: center;
}

This does not work well for multiple lines of text.

Older technique: table-cell

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

This works because vertical-align applies to table-cell layout, but Flexbox is usually preferred today.

Why your original CSS did not work

.testimonialText {
  vertical-align: middle;
}

That property does not vertically center multi-line content inside a standard block div. The div itself is not using a layout mode where vertical-align controls inner content placement.

Consider this example:

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

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border: 1px solid #999;
}

Here is what happens step by step:

1. The browser creates a div with the text Hello world inside it.
2. height: 100px gives the box a fixed vertical space.
3. display: flex changes the div into a flex container.
4. The text becomes flex content inside that container.
5. align-items: center places the content in the vertical middle of the 100px box.
6. justify-content: center places the content in the horizontal middle.
7. The result is text centered both vertically and horizontally.

Now compare that to this broken expectation:

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

What happens?

1. The box still gets a height of 100px.
2. But vertical-align does not control inner text positioning in a normal block div.
3. The text remains in its normal top flow position.
4. So nothing appears to change.

Vertical centering appears in many everyday UI elements:

• Buttons: text should sit neatly in the middle
• Cards: a short message may need centered placement
• Loading states: "Loading..." often appears in the middle of a panel
• Empty states: messages like "No results found" are often centered in a container
• Hero banners: headings and call-to-action text may need vertical centering
• Profile widgets: avatars and labels often need centered alignment

Example: centered message in a dashboard card

.emptyState {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
  color: #666;
}

<div class="emptyState">No notifications yet</div>

In real projects, developers usually solve vertical centering with layout systems rather than one-off hacks.

Common patterns

1. Flexbox utility classes

Many codebases create reusable classes like this:

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

Then they reuse it:

<div class="card flex-center">Saved successfully</div>

2. Guarding against unknown content length

If text might wrap to multiple lines, Flexbox is safer than line-height.

3. Component styling

In UI components, vertical centering is often built directly into the component's container:

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

4. Combining alignment with spacing

Developers often pair centering with padding and max-width for readability:

.messageBox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
}

5. Legacy support in older code

Older codebases may still use display: table-cell for vertical centering, especially in projects written before Flexbox became standard.

1. Using vertical-align on a normal block div

Broken example:

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

Why it fails:

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

Use this instead:

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

2. Using line-height for multi-line text

Broken example:

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

Why it fails:

• This only works well for a single line.
• Wrapped text becomes awkward and unreadable.

3. Forgetting to give the container a height

Broken example:

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

Why it may seem not to work:

• If the container has no meaningful height, there may be no extra vertical space to center within.

Fix:

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

4. Confusing text alignment with vertical alignment

.box {
  text-align: center;
}

What it does:

• Centers text horizontally, not vertically.

5. Centering the element instead of the text inside it

Sometimes developers center the div on the page, but not its contents.

.box {
  margin: 0 auto;
}

This can center the box itself horizontally, but it does not vertically center the content inside the box.

Flexbox vs vertical-align

• Use Flexbox to center content inside containers.
• Use vertical-align when dealing with inline, inline-block, or table-cell alignment.

Flexbox vs Grid

• Flexbox is great for one-dimensional layout: row or column.
• Grid is great for two-dimensional layout.
• For simple centering, both work well.

Example with Grid:

.box {
  display: grid;
  place-items: center;
  height: 200px;
}

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

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

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

/* Legacy approach */
.box {
  display: table-cell;
  vertical-align: middle;
}

Rules to remember

• vertical-align does not vertically center text inside a normal block div.
• text-align: center is for horizontal centering of inline content.
• Flexbox is usually the safest choice.
• Multi-line text needs Flexbox, Grid, or table-cell style approaches.
• Centering works best when the container has a defined height or available vertical space.

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

Because a normal div is a block element, and vertical-align does not control how block content is vertically positioned inside it.

What is the best modern way to vertically center text in CSS?

Usually Flexbox:

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

Can I use line-height to center text vertically?

Yes, but only for single-line text. It is not a good solution for wrapped or multi-line content.

Does text-align: center vertically center text?

No. It only centers text horizontally.

Is CSS Grid also good for centering?

Yes. A simple option is:

display: grid;
place-items: center;

What if my text spans multiple lines?

Use Flexbox or Grid. They handle multi-line content much better than line-height.

Does the container need a height for vertical centering?

Usually yes. There must be extra vertical space available for the content to be centered within.

• Flexbox — the most common modern layout system for centering and alignment.
• CSS Grid — another layout system that makes centering very easy.
• text-align — useful for horizontal text alignment and often confused with vertical centering.
• display property — determines whether an element behaves like a block, inline element, flex container, or grid container.
• line-height — sometimes used for vertical centering of single-line text.
• positioning in CSS — important when centering content with absolute positioning and transforms.
• box model — helps explain how height, padding, and available space affect centering.