How to Center Anything in CSS

Center text, blocks, images and whole boxes horizontally and vertically with text-align, margin auto, flexbox, grid and position.

Lesson 21 of 49Beginner15 min read

"How do I center a div?" is one of the most searched CSS questions of all time, and it has become a running joke among developers. The joke exists because there isn't one answer. Centering text is different from centering a box, and centering horizontally is different from centering vertically. Older CSS made vertical centering genuinely awkward.

The good news is that modern CSS makes every case simple once you know which tool fits. In this lesson you'll learn the five techniques you need: text-align for inline content, margin: 0 auto for blocks, flexbox and grid for centering in both directions, and absolute positioning for overlays such as badges and pop-ups.

At the end there's a quick reference table, so next time you need to center something you can pick the right method in seconds.

Centering text and inline content

CSS
.title { text-align: center; }

text-align: center centers the inline content inside a block: text, links, <span> elements, images (which are inline by default) and inline-block buttons. It doesn't move the block itself. If a paragraph is full width, its text appears centered, but the paragraph box still spans the whole container.

Centering a block horizontally with margin auto

CSS
.card { width: 320px; margin: 0 auto; }
  • A block with a width (or max-width) and margin-left: auto; margin-right: auto is centered in its container.
  • The browser splits the leftover space equally between the two auto margins.
  • Without a width, the block fills its container, so there's no leftover space and nothing changes.
  • To center an image this way, first make it a block: img { display: block; margin: 0 auto; }.

Centering in both directions with flexbox and grid

Flexbox and grid center in both directions with very little code:

CSS
/* flexbox */
.parent { display: flex; justify-content: center; align-items: center; }

/* grid: the shortest way */
.parent { display: grid; place-items: center; }

Both work on the parent, and both need the parent to be taller than the child for vertical centering to be visible. Give the parent a min-height, such as min-height: 100dvh for a full-screen section. A third shortcut also works: make the parent flex or grid and give the child margin: auto.

Centering with absolute position

For overlays, badges and pop-ups that sit on top of other content:

CSS
.parent { position: relative; }
.child {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

top: 50% and left: 50% put the child's top-left corner in the middle, then translate(-50%, -50%) shifts it back by half its own size. A newer version is position: absolute; inset: 0; margin: auto;, which works when the child has a set width and height.

CSS Centering Syntax

Centering cheatsheet

.text { text-align: center; }
.block { max-width: 600px; margin-inline: auto; }
.grid-center { display: grid; place-items: center; min-height: 300px; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

CSS Centering Summary

  • text-align: center centers text and inline content, not the block itself.
  • margin: 0 auto centers a block that has a width.
  • display: grid; place-items: center centers a child in both directions.
  • Flexbox uses justify-content and align-items to center along both axes.
  • Vertical centering needs the parent to have height to spare.

CSS Centering Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Text vs block centering

div {
  padding: 12px;
  margin-bottom: 10px;
  font-family: sans-serif;
  background: #e0e7ff;
}

.a { text-align: center; }

.b {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 8The text moves to the middle, but the box still fills the width.
  2. Lines 11 to 13The 200-pixel box sits in the middle with equal auto margins.
Example 2

Perfect centering with grid and flexbox

.grid-box, .flex-box {
  min-height: 140px;
  background: #ecfdf5;
  border: 2px dashed #16a34a;
  margin-bottom: 12px;
}

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

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

.child { padding: 12px 18px; background: #16a34a; color: white; border-radius: 8px; font: 600 15px sans-serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The parents need extra height to show vertical centering.
  2. Line 8Two declarations center the child both ways.
  3. Lines 11 to 14Flexbox centers a row of items and spaces them with gap.
Example 3

A centered badge and modal

.avatar { position: relative; width: 120px; }
.avatar img { display: block; border-radius: 50%; }
.badge {
  position: absolute; top: 0; right: 0;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: #dc2626; color: white; border-radius: 50%; font: bold 14px sans-serif;
}

.screen { position: relative; height: 160px; background: #1f2937; margin-top: 12px; border-radius: 10px; }
.modal {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white; padding: 16px 24px; border-radius: 8px; font: 600 16px sans-serif;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1The avatar is the positioning context for the badge.
  2. Line 5Grid also centers the number inside the badge.
  3. Line 9The dark screen is the context for the modal.
  4. Lines 11 to 12The modal's corner goes to the middle, then the transform pulls it back by half its size.

Common CSS Centering Mistakes

Using text-align to center a box

Don't
.card { width: 300px; text-align: center; } /* the card stays on the left */
Do
.card { width: 300px; margin: 0 auto; text-align: center; }

text-align centers what's inside the card, not the card itself.

margin: auto without a width

Don't
.box { margin: 0 auto; } /* fills the width, so nothing to center */
Do
.box { max-width: 400px; margin: 0 auto; }

vertical-align on block elements

Don't
.parent { height: 300px; vertical-align: middle; }
Do
.parent { height: 300px; display: grid; place-items: center; }

vertical-align only works on inline elements and table cells, not on block layouts.

CSS Centering in Real Projects

Centering everywhere

Landing pages center a hero heading and button with grid or flexbox. Checkout and contact boxes are centered with max-width and margin: auto. Notification badges on app icons use absolute positioning, and every modal dialog library centers its window with either the transform technique or flexbox on a full-screen overlay. The native <dialog> element is centered by the browser using margin: auto.

CSS Centering Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Center a child in both directions with grid.

.parent {
  display: grid;
  : center;
}
Multiple choiceeasy

Which rule centers the text inside a paragraph?

Multiple choicemedium

What does a block need for margin: 0 auto to center it?

Multiple choicemedium

In the transform centering trick, why is translate(-50%, -50%) needed?

Fix the bugmedium

The message should sit in the exact center of the stage, both horizontally and vertically. Fix the CSS.

.stage {
  height: 200px;
  text-align: center;
  vertical-align: middle;
}
.msg { margin: 0; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Message is vertically centered
  • Message is horizontally centered

CSS Centering Quiz

5 questions to check what you learned.

  1. Which is the shortest way to center a child both ways?

    • position: center
    • align: middle
    • display: grid; place-items: center
    • margin: center

  2. Which flexbox property centers items along the main axis?

    • align-items
    • align-content
    • flex-center
    • justify-content

  3. Why doesn't vertical centering show even with align-items: center?

    • Flexbox can't center vertically
    • It needs !important
    • The child needs a border
    • The parent is only as tall as the child

  4. How do you center an image horizontally with margin auto?

    • img { display: block; margin: 0 auto; }
    • img { margin: auto; } alone
    • img { align: center; }
    • img { text-align: center; }

  5. Which works for a child with a set width and height inside a positioned parent?

    • position: absolute; center: 0
    • position: fixed; margin: 0
    • position: absolute; inset: 0; margin: auto
    • position: static; inset: auto

CSS Centering Challenge

A centered hero section

  1. Make .hero a flex container that centers its content horizontally and vertically, stacked in a column
  2. Give .hero a min-height of 240px
  3. Center the text inside .hero with text-align
  4. Make .inner no wider than 300px
.hero { background: #fef3c7; font-family: sans-serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Hero is a centered column
  • Hero is at least 240px tall
  • Text is centered
  • Inner box is at most 300px wide

Related CSS topics

19FlexboxLine things up in rows or columns, space them out and centre anything.20GridTwo-dimensional layouts with rows, columns, fr units and named areas.17Position & z-indexMove elements with relative, absolute, fixed and sticky, and stack them with z-index.
Esc
↑↓ to navigateEnter to open