Runnable CSS Docs: Center a Div

Q: How do I center a div horizontally and vertically?

Make the parent a grid and center its content: .parent { display: grid; place-items: center; }. The flexbox version is display: flex; justify-content: center; align-items: center;. Either way the parent needs a height taller than the div.

Q: How do I center a div horizontally only?

Give it a width and auto side margins: .box { width: 300px; margin: 0 auto; } (or max-width for a responsive block). margin-inline: auto is the same thing in logical properties.

Q: What is the easiest way to center a div?

display: grid; place-items: center; on the parent: two declarations, both axes, any size of child. Use flexbox when the parent also lays out other items in a row.

Q: How do I center text inside a div?

Use text-align: center on the div for text and inline content. Centering the div itself and centering the text inside it are separate jobs.

The short answer

To center a div both horizontally and vertically inside its parent, make the parent a grid and center its content:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

That works for any size of child and needs nothing on the child itself. Below are six methods side by side. Each box measures itself after it renders and prints how far its center is from the parent's center:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

All six report 0px on both axes (the stage's 1px border is equal on every side, so it does not shift the center). Change a box's width or text and run it again: the methods that do not depend on a fixed size stay at 0.

Which method to use

Method	Centers	Child needs a fixed size?	Best for
Grid `place-items: center`	Both axes	No	The default choice: one child in a box
Flexbox `justify-content` + `align-items`	Both axes	No	A row or column of items, centered as a group
`margin: auto` in a flex or grid parent	Both axes	No	Centering one item while its siblings are laid out differently
`margin: 0 auto`	Horizontal only	A `width` or `max-width`	Page containers, articles, forms in normal flow
Absolute + `translate(-50%, -50%)`	Both axes	No	Overlays, badges and modals on top of other content
Absolute + `inset: 0; margin: auto`	Both axes	Yes, width and height	Fixed size dialogs
`align-content: center` on a block	Vertical	No	Vertical centering without changing the parent's display

Method 1: flexbox

Flexbox centers along two axes with two properties. justify-content handles the main axis (horizontal in a row), and align-items the cross axis:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

With several children, flexbox centers them as a group, keeping them in a row. That is where it beats grid, which would stack the three items in one centered column. The justify-content page covers every alignment value.

Method 2: grid

place-items: center is shorthand for align-items: center plus justify-items: center. On a grid container with a single child it centers that child in both directions:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height rather than height lets the parent grow if the card gets taller than 180px, instead of the card overflowing.

Method 3: margin: 0 auto (horizontal)

A block element with a width smaller than its container can be centered horizontally with automatic side margins. The browser splits the free space equally between the two sides:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

The second box fills the whole width, so there is no free space and nothing moves. That is the usual reason margin: 0 auto "does not work". It also only centers horizontally in normal flow; vertical auto margins become 0 there. Inside a flex or grid parent, though, margin: auto centers in both directions, which is the third box in the comparison above.

Method 4: absolute position and transform

When the element must sit on top of other content (a badge on a photo, a modal over the page), position it absolutely at 50% and pull it back by half its own size:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% puts the element's top left corner at the center. The percentages in translate() refer to the element's own size, so -50% moves it back by half its width and height whatever they are. The parent must be positioned (position: relative), or the element centers on the page instead. Positioning is covered on the position page.

A variant for elements with a known size: position: absolute; inset: 0; margin: auto; plus a width and height. The auto margins share the space on all four sides.

Method 5: align-content on a normal block

align-content: center now also works on ordinary block containers, not only flex and grid ones. It centers the content vertically without changing how the children are laid out:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

It is supported in current Chrome, Firefox and Safari. Older browsers ignore it, so use grid if you have to support them.

Centering in the whole screen

To center a dialog in the viewport regardless of scrolling, combine a fixed full-screen layer with grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

For centering a whole page's content vertically, use min-height: 100dvh on the parent rather than 100vh: on phones, 100vh includes the area behind the browser's toolbars, so the "center" sits too low.

Centering text is a different job

Everything above centers a box. To center the text inside a box, use text-align: center on it, as shown on the HTML center text page. You often need both: grid to center the card, and text-align to center the lines inside it.

Common mistakes

A parent with no height. Vertical centering needs free space; a parent that shrinks to its content has none.
margin: 0 auto on a full-width block. Give it a width or max-width first.
margin: auto to center vertically in normal flow. Vertical auto margins are 0 there; use flex or grid.
Absolute centering without a positioned parent. The element centers in the page, not the box.
align-items: center on the child. Alignment properties go on the parent (the flex or grid container), except margin: auto and align-self.
text-align: center to center a block. It centers inline content (text, images, inline-block children), not a block child.

Frequently Asked Questions

How do I center a div horizontally and vertically?

Make the parent a grid and center its content: .parent { display: grid; place-items: center; }. The flexbox version is display: flex; justify-content: center; align-items: center;. Either way the parent needs a height taller than the div.

How do I center a div horizontally only?

Give it a width and auto side margins: .box { width: 300px; margin: 0 auto; } (or max-width for a responsive block). margin-inline: auto is the same thing in logical properties.

Why is margin: 0 auto not centering my div?

The div has no width smaller than its container, so there is no free space to share (a block fills the full width by default). Set width or max-width. It also does nothing on inline elements and never centers vertically in normal flow.

Why doesn't my div center vertically?

The parent is only as tall as its content, so there is no extra space to center in. Give the parent a height (or min-height), then use grid or flexbox centering.

What is the easiest way to center a div?

display: grid; place-items: center; on the parent: two declarations, both axes, any size of child. Use flexbox when the parent also lays out other items in a row.

How do I center text inside a div?

Use text-align: center on the div for text and inline content. Centering the div itself and centering the text inside it are separate jobs.

Related concepts