How to Center a Div: The Complete Guide (Flexbox, Grid, Position)

Centering a div is the most searched CSS question on the internet. This guide covers every modern technique with working code you can copy directly.

Quick Reference

1. Flexbox (recommended — works everywhere)

The most versatile approach. Works for any child element.

Center horizontally and vertically

.parent {
  display: flex;
  justify-content: center; /* horizontal axis */
  align-items: center;     /* vertical axis */
}

<div class="parent" style="height: 300px; background: #f0f0f0;">
  <div class="child">Centered!</div>
</div>

Center horizontally only

.parent {
  display: flex;
  justify-content: center;
}

Center vertically only

.parent {
  display: flex;
  align-items: center;
}

Center multiple children in a row

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

2. CSS Grid (cleanest single-line solution)

.parent {
  display: grid;
  place-items: center; /* shorthand for align-items + justify-items */
}

place-items: center is equivalent to:

.parent {
  display: grid;
  align-items: center;
  justify-items: center;
}

Center one child, align others normally

.parent {
  display: grid;
}

.child {
  place-self: center;
}

3. Absolute Positioning + Transform

Use when you can't control the parent's display property (e.g., it's position: relative).

.parent {
  position: relative;
}

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

How it works:

• top: 50% / left: 50% places the element's top-left corner at the center
• transform: translate(-50%, -50%) shifts it back by half its own width and height

4. margin: auto (horizontal centering of block elements)

Classic technique — works for block elements with a defined width.

.child {
  width: 600px;        /* or max-width */
  margin: 0 auto;      /* top/bottom: 0, left/right: auto */
}

For centering with top margin too:

.child {
  width: 600px;
  margin: 40px auto;
}

Limitation: Only works horizontally. Does not vertically center.

5. Center in the Viewport

Full-page centering — common for modals, splash screens, loading states.

Flexbox approach

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

Fixed position approach (for overlays)

.modal {
  position: fixed;
  inset: 0;                  /* top/right/bottom/left: 0 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

6. CSS Table (legacy / email)

Useful for HTML emails and legacy browser support.

.parent {
  display: table;
  width: 100%;
  height: 300px;
}

.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

7. Text Centering

Centering inline content (text, inline elements) uses text-align, not Flexbox.

.container {
  text-align: center;       /* centers inline content */
}

/* Vertically center single-line text */
.button {
  line-height: 48px;        /* same as element height */
  height: 48px;
}

Real-World Patterns

Centered card on page

.page {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* top-aligned, not vertically centered */
  padding: 40px 16px;
  min-height: 100vh;
}

.card {
  width: 100%;
  max-width: 480px;
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

Centered hero section

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  padding: 0 24px;
}

Icon centered in a button

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
}

Centered loader/spinner

.spinner-wrapper {
  display: grid;
  place-items: center;
  height: 100vh;
}

Method Comparison

6 Common Mistakes

1. Forgetting to set a height on the parent

Flexbox/Grid centering only works if the parent has a height. Without it, the parent collapses to the content height and there's nothing to center within.

/* WRONG — parent has no height */
.parent { display: flex; align-items: center; }

/* RIGHT */
.parent { display: flex; align-items: center; height: 300px; }

2. Using margin: auto on an inline element

margin: auto only works on block-level elements. Apply display: block or use Flexbox instead.

/* WRONG */
span { margin: 0 auto; }

/* RIGHT */
span { display: block; width: fit-content; margin: 0 auto; }

3. Confusing justify-content and align-items with flex-direction: column

When flex-direction: column, the axes flip:

• justify-content controls the vertical axis
• align-items controls the horizontal axis

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center; /* now controls vertical */
  align-items: center;     /* now controls horizontal */
}

4. Absolute centering without position: relative on parent

Without position: relative on the parent, the child positions itself relative to the nearest positioned ancestor (or the viewport).

/* WRONG */
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* RIGHT — parent must have position */
.parent { position: relative; }
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

5. Using vertical-align: middle on a block element

vertical-align only works on inline and table-cell elements, not on block-level divs.

/* This does nothing on a div */
div { vertical-align: middle; }

6. Centering the content instead of the element

If you want to center a div in the page but you apply text-align: center to it, you're centering its text content — not the div itself.

FAQ

Q: What's the easiest way to center a div?

For modern browsers: set the parent to display: flex; justify-content: center; align-items: center;. One rule, works horizontally and vertically.

Q: How do I center a div horizontally only?

.div { margin: 0 auto; width: fit-content; } /* block element */
/* or */
.parent { display: flex; justify-content: center; }

Q: How do I center a div vertically only?

.parent { display: flex; align-items: center; height: 300px; }

Q: How do I center a div both horizontally and vertically without Flexbox or Grid?

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

Q: Why doesn't margin: auto center vertically?

margin: auto for vertical margins (top/bottom) resolves to 0 in normal block flow. This is a spec decision — vertical centering requires Flexbox, Grid, or absolute positioning.

Q: How do I center a div in an HTML email?

Use table-based layout — email clients have poor support for Flexbox/Grid:

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle" height="300">
      <div>Centered content</div>
    </td>
  </tr>
</table>

Q: What's place-items in CSS Grid?

place-items: center is shorthand for align-items: center; justify-items: center. It's the fastest way to center a single element inside a grid cell. Supported in all modern browsers.