What is the easiest way to center a div in CSS?

Flexbox. Put display: flex; justify-content: center; align-items: center on the parent and the child centres both horizontally and vertically, whatever its size. It needs no fixed widths, no negative margins, and works in every browser in current use.

How do I center a div horizontally only?

Give the div a width and margin: 0 auto. The browser splits the leftover space evenly on both sides. This only works horizontally, and only when the element has a width narrower than its parent, which is why it silently does nothing on a full-width block.

Why is margin auto not centering my div vertically?

margin: auto resolves to zero in the vertical direction in normal document flow, so it can only centre horizontally. To centre vertically, use flexbox with align-items: center, CSS grid with place-items: center, or absolute positioning with a transform.

How to Center a Div in CSS

This recipe shows how to center any element horizontally and vertically using flexbox as the modern default, plus grid and absolute-positioning alternatives for specific cases.

Why centering used to be tricky

Before flexbox and grid existed, centering an element - especially vertically - meant workarounds. margin: 0 auto centers a block horizontally, but only if it has a fixed width, and it does nothing for vertical centering. Vertical centering was faked with line-height tricks or negative margins calculated from a known element height. None of it adapted well to content whose size you don't know ahead of time, like text that might wrap differently on another screen.

Flexbox: the modern default

Flexbox centers content in both directions with three lines on the parent: display: flex turns it into a flex container, justify-content: center centers children along the main axis (horizontal, by default), and align-items: center centers them along the cross axis (vertical). Because flexbox measures the child's actual rendered size, it centers a single word, an image, or an entire card without any manual math. Just remember to give the flex container a height, or there is nothing to center within - use min-height: 100vh to center inside the full viewport, or height: 100% inside a parent that already has a set height.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .stage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: #f2f4f7;
  }
  .card {
    padding: 24px 32px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    font-family: sans-serif;
  }
</style>
</head>
<body>
  <div class='stage'>
    <div class='card'>
      <h2>Perfectly centered</h2>
      <p>This card sits dead-center no matter the viewport size.</p>
    </div>
  </div>
</body>
</html>

Grid alternative: place-items

CSS Grid offers an even shorter route: place-items: center on the grid container centers a single child both horizontally and vertically in one declaration. It is shorthand for align-items: center plus justify-items: center. Reach for it when the rest of the layout is already grid-based, or simply when you prefer the terser syntax.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .stage-grid {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    background: #f2f4f7;
  }
  .card {
    padding: 24px 32px;
    background: white;
    border-radius: 8px;
    font-family: sans-serif;
  }
</style>
</head>
<body>
  <div class='stage-grid'>
    <div class='card'>Centered with one line: place-items: center;</div>
  </div>
</body>
</html>

Centering a fixed-size overlay with absolute positioning

Sometimes an element needs to be centered inside a position: relative parent while other content keeps flowing normally around it - a badge on a photo, a spinner over a loading card. Position the element absolutely at top: 50%; left: 50%, then pull it back by half of its own size with transform: translate(-50%, -50%). Because the offset is calculated from the element's own rendered size, this works even without knowing its exact pixel dimensions in advance.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .frame {
    position: relative;
    width: 320px;
    height: 200px;
    background: #222;
  }
  .badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: gold;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: sans-serif;
  }
</style>
</head>
<body>
  <div class='frame'>
    <div class='badge'>Centered overlay</div>
  </div>
</body>
</html>

Technique	Centers	Needs known size?	Best for
Flexbox (justify-content + align-items)	Both axes	No	General-purpose centering, full sections
Grid place-items: center	Both axes	No	A single child inside a grid layout
Absolute + transform: translate(-50%,-50%)	Both axes	No - the offset is relative to the element's own size	Overlays and badges on top of other content
margin: 0 auto	Horizontal only	Yes - needs a set width	Simple block centering in older layouts

Frequently Asked Questions

What is the easiest way to center a div in CSS?: Flexbox. Put display: flex; justify-content: center; align-items: center on the parent and the child centres both horizontally and vertically, whatever its size. It needs no fixed widths, no negative margins, and works in every browser in current use.
How do I center a div horizontally only?: Give the div a width and margin: 0 auto. The browser splits the leftover space evenly on both sides. This only works horizontally, and only when the element has a width narrower than its parent, which is why it silently does nothing on a full-width block.
Why is margin auto not centering my div vertically?: margin: auto resolves to zero in the vertical direction in normal document flow, so it can only centre horizontally. To centre vertically, use flexbox with align-items: center, CSS grid with place-items: center, or absolute positioning with a transform.