Question
I have a div element with display: block, a width of 90px, and a height of 90px. It contains some text, and I want that text to appear exactly in the center of the div, both horizontally and vertically.
I tried using text-align: center, which centers the text horizontally, but it does not center it vertically. I also tried vertical-align: middle, but that did not work.
How can I center text inside a div both horizontally and vertically using CSS?
Short Answer
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.
Concept
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: centercenters inline content horizontally.- It does not control vertical positioning.
vertical-alignoften confuses beginners because it does not vertically center content inside a regular block-leveldiv.
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.
Mental Model
Think of the div as a box and the text as an item placed inside it.
text-align: centertells 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
divis like an empty room. text-align: centermoves 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.
Syntax and Examples
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: flexturns thedivinto a flex container.justify-content: centercenters content along the main axis.align-items: centercenters 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;
}
Step by Step Execution
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:
- The browser creates a
divwith the classbox. width: 90pxandheight: 90pxmake it a square box.display: flexchanges the layout behavior of the box.- The text
Hibecomes a flex item inside the box. justify-content: centercenters the item horizontally.align-items: centercenters the item vertically.- The result is text placed in the exact middle of the box.
If you removed , the text would still be horizontally centered but would sit near the top based on normal layout behavior.
Real World Use Cases
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>
Real Codebase Usage
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;
: center;
: center;
: ;
}
Common Mistakes
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;
}
Comparisons
| Method | Horizontal Center | Vertical Center | Good for Multi-line Text | Recommended | Notes |
|---|---|---|---|---|---|
text-align: center | Yes | No | Yes | Partly | Only handles horizontal alignment |
vertical-align: middle | No | Sometimes | Limited | No | Not for regular block div centering |
line-height = height | Yes | Yes | No | Only in simple cases | Works mainly for single-line text |
Cheat Sheet
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-aligncenters inline content horizontally.vertical-aligndoes not vertically center content inside a normal blockdiv.- Flexbox and Grid are the preferred modern approaches.
line-heightis fine for single-line text but not flexible.
FAQ
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?
Mini Project
Description
Build a small status tile that displays a message centered inside a fixed square box. This is a practical exercise because centered labels are common in dashboards, badges, counters, and UI cards.
Goal
Create a square box where the text is centered both horizontally and vertically using a modern CSS technique.
Requirements
Requirement 1 Requirement 2 Requirement 3
Keep learning
Related questions
CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text
Learn how CSS font scaling really works and how to make text responsive using %, em, rem, vw, clamp(), and media queries.
CSS Parent Selector Explained: Selecting a Parent <li> from an <a>
Learn whether CSS has a parent selector, how :has() works, and practical alternatives for styling a parent li from a child anchor.
CSS Previous Sibling Selector: What Exists and How to Work Around It
Learn whether CSS has a previous sibling selector, why it does not, and practical ways to style earlier elements using CSS alternatives.