How to Center in CSS: All Alignment Methods

How to center in CSS depends on what you center: text, a block, or a div both ways. Learn every method, from text-align and margin auto to flexbox, grid and transform.

First question: what are you centering?

"How to center a div" is one of the most searched CSS questions ever. The reason it feels hard is that there isn't one answer. The right method depends on two things:

1. What you are centering: inline content (text, links, images in a line) or a block box (a <div>, a card).
2. Which direction: horizontally, vertically, or both.

You met flexbox centering in the Flexbox Alignment lesson. This lesson puts every method side by side, so you can pick the right one each time.

Centering horizontally: text-align and margin auto

Centering text and inline content. Use text-align: center on the parent. It centers everything inline inside it: text, links, <img>, inline-block buttons.

<section class="hero">
  <h1>Learn to code for free</h1>
  <p>Short lessons, real projects.</p>
  <a class="btn" href="/start">Get started</a>
</section>

.hero {
  text-align: center;
  padding: 48px 16px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #2563eb;
  color: white;
  border-radius: 8px;
}

The heading, the paragraph and the button are all centered in the section. The button is centered because it's inline-block, so it behaves like a word in a line.

Centering a block box. text-align doesn't move block boxes themselves. For a block, give it a width and use automatic side margins:

.card {
  max-width: 400px;
  margin-inline: auto;
}

margin-inline: auto is the modern way to write margin-left: auto; margin-right: auto;. The card sits in the middle of its parent. Without a width, the block already fills the parent, so there's nothing to center. width: fit-content is handy when the box should be as wide as its content.

Centering in both directions: flexbox and grid

To center something horizontally and vertically, use flexbox or grid on the parent. The parent must be taller than the child, or there's no vertical space to share.

<div class="screen">
  <div class="modal">
    <h2>Welcome back!</h2>
    <p>You have 3 new messages.</p>
  </div>
</div>

/* Method 1: grid, the shortest */
.screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: #f1f5f9;
}

/* Method 2: flexbox, same result */
/*
.screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
*/

.modal {
  padding: 24px 32px;
  background: white;
  border-radius: 12px;
}

The white box appears in the exact middle of the screen. With grid, place-items: center is shorthand for align-items: center and justify-items: center. With flexbox, justify-content centers along the row and align-items centers across it.

There's also a neat third option: inside a flex or grid parent, margin: auto on the child centers it in both directions.

Tip: If you only remember one method, remember display: grid; place-items: center; on the parent. It works for one child of any size, in both directions.

Absolute position with transform

Sometimes the item must sit on top of other content, like a "Play" button in the middle of a video thumbnail. Then use absolute positioning:

<div class="thumb">
  <img src="https://picsum.photos/id/1043/600/340" alt="Mountain lake at sunrise">
  <span class="play">Play</span>
</div>

.thumb {
  position: relative;
  width: fit-content;
}

.thumb img {
  display: block;
  max-width: 100%;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: rgb(0 0 0 / 0.7);
  color: white;
  border-radius: 999px;
}

top: 50% and left: 50% move the label's top-left corner to the center. translate(-50%, -50%) then moves the label back by half its own width and height, so its center lands in the middle. A shorter modern version is position: absolute; inset: 0; margin: auto;, but that one needs the child to have a known width and height.

vertical-align and the line-height trick

Two older methods still have their place:

vertical-align only works on inline, inline-block and table-cell elements. It aligns an item relative to the line it's in, for example an icon next to text: img { vertical-align: middle; }. In a table, td { vertical-align: middle; } centers cell content vertically (cells already do this by default).

The line-height trick centers a single line of text vertically in a box of known height. Set line-height equal to the height:

.badge {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  text-align: center;
}

The text sits in the vertical middle. But if the text wraps onto two lines, each line becomes 32px tall and it breaks. Use it only for short, one-line labels.

Common mistake: Putting vertical-align: middle on a <div> and expecting it to center inside its parent. It has no effect on block elements. Use flexbox or grid for that.

Centering decision table

What you want to center	Best method
Text or inline content, horizontally	text-align: center on the parent
A block box, horizontally	max-width plus margin-inline: auto
Anything, both directions	Parent: display: grid; place-items: center;
A row of items, both directions	Parent: display: flex; justify-content: center; align-items: center;
An overlay on top of other content	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
An icon next to text	vertical-align: middle or an inline-flex parent
Content in a table cell, vertically	vertical-align: middle on the cell
One short line of text in a fixed-height box	line-height equal to the height

Practice exercise

Build a "404 Page Not Found" page. Center a big "404" heading, a short message and a "Go home" button in the exact middle of the screen using grid. Then add a small "NEW" label in the center of a product image using absolute positioning, and center a footer line of text with text-align.

Hint: give the page wrapper min-height: 100vh, or the vertical centering has no space to work with.

Key takeaways

• Choose a centering method based on what you center (inline or block) and in which direction.
• text-align: center centers inline content; margin-inline: auto centers a block with a width.
• display: grid; place-items: center; centers anything in both directions.
• Absolute position plus transform: translate(-50%, -50%) centers overlays.
• vertical-align works only on inline and table-cell elements; the line-height trick works only for one line.