How can I center text (horizontally and vertically) inside a div block?

Web Development

HTML

CSS

Text Centering

Div Block

How can I center text (horizontally and vertically) inside a div block?

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

JavaScript & Web

Introduction

Centering text inside a div is a very common CSS task, and the best modern answer is usually Flexbox or Grid. Both handle horizontal and vertical alignment cleanly without fragile hacks based on padding or line height.

Flexbox: The Most Practical Default

For a single block of content, Flexbox is usually the clearest solution.

html

1<!doctype html>
2<html>
3  <head>
4    <style>
5      .box {
6        display: flex;
7        align-items: center;
8        justify-content: center;
9        width: 260px;
10        height: 120px;
11        border: 2px solid #333;
12        font: 600 20px/1.2 sans-serif;
13      }
14    </style>
15  </head>
16  <body>
17    <div class="box">Centered Text</div>
18  </body>
19</html>

justify-content: center centers content along the main axis, and align-items: center centers it along the cross axis. With the default row direction, that gives horizontal and vertical centering.

CSS Grid: Even Shorter for Pure Centering

Grid is also excellent when the job is simply “put this content in the middle.”

html

1<!doctype html>
2<html>
3  <head>
4    <style>
5      .box {
6        display: grid;
7        place-items: center;
8        width: 260px;
9        height: 120px;
10        border: 2px solid #333;
11        font: 600 20px/1.2 sans-serif;
12      }
13    </style>
14  </head>
15  <body>
16    <div class="box">Centered Text</div>
17  </body>
18</html>

place-items: center is short and expressive. If you are already using Grid for layout, this is often the cleanest answer.

When `text-align` Helps and When It Does Not

text-align: center only centers inline content horizontally. It does not solve vertical centering by itself.

css

.box {
  text-align: center;
}

That line is useful, but it is not the full solution. Developers often reach for it first and then wonder why the text is still stuck to the top of the box.

Older Approaches and Why They Are Less Ideal

Older CSS patterns used tricks such as:

matching line-height to container height
adding symmetrical padding
absolute positioning with transforms

These can still work, but they are less flexible for multiline content or dynamic content sizes.

For example, the line-height trick only works well for a single line of text.

css

1.box {
2  height: 80px;
3  line-height: 80px;
4  text-align: center;
5}

As soon as the text wraps, the centering breaks down.

A Good Rule of Thumb

Use Flexbox when you are centering content in a component. Use Grid when the element is already part of a grid-based layout or when place-items: center reads most naturally. Avoid older hacks unless you are working in a genuinely constrained legacy environment.

Multiline Text Still Works With Modern Layout

One reason Flexbox and Grid are better is that they handle multiline text naturally.

html

<div class="box">
  This sentence wraps onto multiple lines and still stays centered.
</div>

That is a big improvement over single-line hacks that assume fixed text length.

Common Pitfalls

The most common mistake is assuming text-align: center also handles vertical centering. It does not.

Another mistake is using line-height tricks for content that may wrap. That solution works only for very narrow cases.

Developers also sometimes forget that the container needs a defined height, or at least some vertical space, before vertical centering is visible at all.

It is also easy to center the text node but forget spacing, padding, or box sizing around it, which makes the result look visually off even when the alignment is technically correct.

Summary

The best modern solutions are usually Flexbox or Grid.
Flexbox uses justify-content: center and align-items: center.
Grid can center content with place-items: center.
'text-align: center helps horizontally but not vertically.'
Avoid line-height or padding hacks unless you are dealing with a constrained legacy layout.

Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

How can I center text (horizontally and vertically) inside a div block?

Interview Questions practice on Codemia

Introduction

Flexbox: The Most Practical Default

CSS Grid: Even Shorter for Pure Centering

When text-align Helps and When It Does Not

Older Approaches and Why They Are Less Ideal

A Good Rule of Thumb

Multiline Text Still Works With Modern Layout

Common Pitfalls

Summary

Related reading

Tackling System Design Interview Problems

Track what you have practised

Interview Questions practice on Codemia

When `text-align` Helps and When It Does Not