How to Center Text Horizontally and Vertically Inside a Div in CSS

By the end of this page, you will understand why text-align: center only handles horizontal alignment, why vertical-align usually does not work on normal block elements, and how to correctly center content inside a div using modern CSS techniques such as Flexbox and Grid. You will also see older single-line approaches, common mistakes, and when to use each method.

Centering content in CSS depends on what is being centered and how the parent element lays out its children.

For text inside a normal div:

• text-align: center centers inline content horizontally.
• It does not control vertical positioning.
• vertical-align often confuses beginners because it does not vertically center content inside a regular block-level div.

vertical-align mainly works with:

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

In modern CSS, the most reliable ways to center content both horizontally and vertically are:

• Flexbox
• CSS Grid

These methods are widely used because they are simple, readable, and work well for text, icons, buttons, and other content.

Why this matters in real programming:

• Centering is common in buttons, cards, badges, empty states, loaders, and dialogs.
• Modern layouts often need content centered regardless of screen size.
• Choosing the right centering method avoids fragile CSS hacks.

Think of the div as a box and the text as an item placed inside it.

• text-align: center tells the item: move to the middle from left to right.
• Vertical centering is a different instruction: move to the middle from top to bottom.

A normal block div does not automatically know how to distribute space vertically for its contents.

Flexbox and Grid solve this by turning the box into a layout system that can place items in the center in both directions.

A simple analogy:

• A plain div is like an empty room.
• text-align: center moves a chair to the middle of the room from left to right.
• Flexbox or Grid lets you place the chair exactly in the middle of the room in both directions.

Best modern solution: Flexbox

.box {
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

Why it works

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

For a simple box with text, this centers the text both horizontally and vertically.

Another modern solution: CSS Grid

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

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

Why it works

• display: grid creates a grid container.
• place-items: center centers the content horizontally and vertically.

This is one of the shortest centering solutions in CSS.

Older single-line text approach

If the box contains only one line of text, you can match line-height to the box height:

.box {
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}

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

This works only in limited cases:

• usually a single line of text
• not ideal for wrapping text
• less flexible than Flexbox or Grid

Consider this example:

<div class="box">Hi</div>

.box {
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

Here is what happens step by step:

1. The browser creates a div with the class box.
2. width: 90px and height: 90px make it a square box.
3. display: flex changes the layout behavior of the box.
4. The text Hi becomes a flex item inside the box.
5. justify-content: center centers the item horizontally.
6. align-items: center centers the item vertically.
7. The result is text placed in the exact middle of the box.

If you removed align-items: center, the text would still be horizontally centered but would sit near the top based on normal layout behavior.

If you removed justify-content: center, the text would be vertically centered but stay aligned to the left.

Centering content inside a div is very common in real interfaces.

Examples

• Buttons: center the label inside a fixed-height button
• Badges: center numbers inside circular notification badges
• Profile avatars: center initials inside a square or circle
• Loading states: center a spinner or message in a card
• Dashboard widgets: center summary values inside tiles
• Empty states: center text like "No data" in a container
• Hero sections: center headlines inside banners or sections

Example: notification badge

.badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: crimson;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="badge">3</div>

In real projects, developers usually prefer Flexbox for centering because it is easy to read and works well when content changes.

Common patterns

Reusable utility class

Many codebases create a reusable class:

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

Then use it anywhere:

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

Centering dynamic content

If content may change from one word to multiple lines, Flexbox or Grid is safer than line-height.

Component styling

Developers often use centering in:

• button components
• modal headers or bodies
• cards
• icon containers
• status indicators

Guarding against layout issues

A real codebase may also combine centering with:

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px;
}

Why add text-align: center too?

• Flexbox centers the content block itself.
• text-align: center helps center the text inside that block, especially if the content wraps across multiple lines.

1. Using vertical-align: middle on a normal block div

This usually does not work the way beginners expect.

.box {
  width: 90px;
  height: 90px;
  display: block;
  vertical-align: middle; /* not useful here */
}

Why it fails

vertical-align does not vertically center text inside standard block elements.

2. Forgetting that text-align is only horizontal

.box {
  text-align: center;
}

This centers inline text from left to right, but not top to bottom.

3. Using line-height for multi-line text

Broken for wrapped content:

.box {
  height: 90px;
  line-height: 90px;
  text-align: center;
}

<div class="box">This is a longer message</div>

Problem

If the text wraps to a second line, the layout looks wrong.

4. Centering without a defined height

Vertical centering needs available vertical space.

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

If the box has no height or no content-driven height difference, the effect may not be visible.

5. Mixing old hacks with modern layout unnecessarily

Prefer this:

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

Instead of relying on fragile positioning tricks unless you have a very specific reason.

Flexbox vs Grid

• Flexbox is often chosen for one-dimensional layout and simple centering.
• Grid is also excellent for centering and can be even shorter with place-items: center.
• For this problem, either is a good choice.

When to use line-height

Use it only when:

• the container has a fixed height
• the text is guaranteed to stay on one line
• you want a very simple legacy-friendly solution

Quick reference

Horizontal-only centering

.box {
  text-align: center;
}

Best general solution: Flexbox

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

Short modern solution: Grid

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

Single-line text only

.box {
  height: 90px;
  line-height: 90px;
  text-align: center;
}

Important rules

• text-align centers inline content horizontally.
• vertical-align does not vertically center content inside a normal block div.
• Flexbox and Grid are the preferred modern approaches.
• line-height is fine for single-line text but not flexible.
• Vertical centering needs visible height or space to center within.

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

Because vertical-align is not meant for vertically centering content inside normal block elements. It works mainly with inline elements, inline-block elements, and table cells.

What is the easiest way to center text inside a div?

Use Flexbox:

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

Should I use Flexbox or Grid for centering?

Either is fine. Flexbox is very common and easy to understand. Grid is also clean, especially with place-items: center.

Can I use line-height to vertically center text?

Yes, but only when the text stays on a single line and the container has a fixed height.

Do I still need text-align: center with Flexbox?

Not always for single short text. But it can help when text wraps across multiple lines.

Does the container need a height for vertical centering?

Usually yes. Without extra vertical space, there may be nothing to center within.

Is absolute positioning a good way to center text?

It can work, but for simple content centering, Flexbox or Grid is usually cleaner and easier to maintain.

• Flexbox — A modern CSS layout system commonly used for alignment and spacing.
• CSS Grid — Another layout system that can center items very easily.
• text-align — Controls horizontal alignment of inline content.
• vertical-align — Often confused with vertical centering; useful in specific layout contexts.
• line-height — Can be used for simple single-line vertical centering.
• display property — Determines how an element participates in layout.
• Box model — Helps explain width, height, padding, and available centering space.