Center Text Horizontally and Vertically in a Div with CSS

You will learn why horizontal and vertical text alignment use different CSS properties, why vertical-align does not normally work on a block div, and how to center content reliably with Flexbox or CSS Grid.

text-align: center centers inline content—such as text and inline elements—along the horizontal axis of a block container.

Vertical centering is different because a normal block element does not have a built-in property that means “move this text to the middle vertically.” The property vertical-align is often misunderstood: it works primarily with inline-level elements, table cells, and inline-table elements. It does not vertically align ordinary content inside a normal block-level div.

For modern CSS, use a layout system such as Flexbox or Grid. These systems can align an element's contents along both axes without relying on fixed line heights or manual padding.

For a single box containing text, Flexbox is a clear and widely used solution.

Think of the div as a square room.

• text-align: center moves the text to the middle of the room from left to right.
• It does nothing to move the text from top to bottom.
• Flexbox gives the room two alignment controls:
  • justify-content positions items along the main axis.
  • align-items positions items along the cross axis.

With Flexbox's default row direction, justify-content: center centers horizontally and align-items: center centers vertically.

Use Flexbox on the container:

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

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

display: flex turns the div into a flex container. Its direct content becomes a flex item.

• justify-content: center centers the item horizontally.
• align-items: center centers the item vertically.

A CSS Grid alternative is even shorter:

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

place-items: center centers content in both directions.

Consider this HTML and CSS:

<div class="status">Saved</div>

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

What happens:

1. The browser creates a div that is 90px wide and 90px tall.
2. display: flex makes .status a flex container.
3. The text Saved is wrapped in an anonymous flex item by the browser.
4. The default flex direction is row, so the main axis runs horizontally.
5. justify-content: center places the text item in the horizontal center.
6. The cross axis runs vertically.
7. align-items: center places the text item in the vertical center.

The text is centered even if its font size or line height changes.

Vertical and horizontal centering is useful for many interface elements:

• Buttons: Center a label and icon inside a fixed-height button.
• Avatar placeholders: Center a user's initials in a circular profile image.
• Loading states: Place “Loading…” in the middle of a panel.
• Empty states: Center a message in a card with no search results.
• Dashboard tiles: Center a count, label, or status indicator inside a square widget.
• Modal dialogs: Center dialog content within an overlay, usually with additional sizing rules.

In production code, developers usually place alignment rules on the component container rather than trying to position each text node.

A reusable utility class might look like this:

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

<button class="icon-button center-content" aria-label="Close">
  ×
</button>

For components that can contain multiple lines, icons, or dynamic content, Flexbox and Grid remain reliable:

.empty-state {
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
}

text-align: center is still useful here: Grid centers the content block itself, while text-align centers lines of text inside that block.

When centering a full-page area, use a meaningful available height such as min-height: 100vh rather than assuming a fixed pixel height:

.page-message {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

Expecting vertical-align to work on a block container

This does not vertically center the text in a normal div:

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

vertical-align aligns an inline-level or table-cell element relative to nearby content. It is not a general-purpose vertical content alignment property for block elements.

Using only text-align

.box {
  text-align: center;
}

This centers text horizontally only. Add Flexbox or Grid for vertical positioning.

Using line-height for content that may wrap

For one line, this older technique can appear to work:

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

But it is fragile. If the text wraps to two lines, uses a different line height, or includes other elements, the layout will not be centered correctly. Prefer Flexbox or Grid.

Centering the wrong element

Alignment properties affect an element's direct children. If an inner child has a width of 100%, it may appear unchanged even though it is technically centered. In that case, use text-align: center on the child as well, or avoid giving the child unnecessary full width.

Forgetting available height

Vertical centering needs extra vertical space. If a container has no explicit height, min-height, or parent-constrained height, it may shrink to its content and leave nothing to center within.

Flexbox versus Grid

Use Flexbox when the component may later need a row or column of items, such as an icon next to text.

Use Grid when the only goal is simple two-dimensional centering:

display: grid;
place-items: center;

Both are appropriate for centering text in a box.

/* Recommended: Flexbox */
.box {
  display: flex;
  justify-content: center; /* horizontal in a row */
  align-items: center;     /* vertical in a row */
}

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

/* Horizontal text alignment only */
.box {
  text-align: center;
}

Key rules:

• text-align aligns inline text horizontally.
• vertical-align does not vertically center text inside a normal block div.
• Use Flexbox or Grid for content that can wrap or change size.
• Give the container a height, min-height, or parent-provided height if vertical centering needs visible space.
• Add text-align: center when a centered child contains multiple text lines.

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

A normal div is block-level. vertical-align is designed mainly for inline elements, inline-block elements, and table cells—not for aligning a block container's contents.

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

Use CSS Grid:

display: grid;
place-items: center;

Or use Flexbox with justify-content: center and align-items: center.

Does Flexbox center multiline text too?

Yes. Flexbox centers the text block as an item. Add text-align: center if you also want each wrapped line centered.

Should I use line-height equal to the div height?

Only for guaranteed single-line text in a fixed-height box. It is less flexible than Flexbox or Grid and breaks down when text wraps.

Which Flexbox property controls vertical alignment?

With the default flex-direction: row, align-items: center controls vertical alignment. If you change to flex-direction: column, the axes switch.

Can I center an icon and text together?

Yes. Put both in the flex container. They will be centered as a group. Use gap to create spacing between them.

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

• CSS Flexbox — A one-dimensional layout system used to align and distribute component content.
• CSS Grid — A two-dimensional layout system with concise centering tools such as place-items.
• CSS text-align — Controls horizontal alignment of inline text and inline elements.
• CSS vertical-align — Aligns inline and table-cell content, not ordinary block contents.
• CSS box model — Explains how width, height, padding, borders, and margins affect the available centering space.
• Responsive sizing with min-height — Helps vertical centering work when a component or page must adapt to different screen sizes.