How to Center a Div in CSS (Every Method, 2026)

Method 1: Flexbox (use this for most cases)

The modern default. Apply flex to the parent, then center both axes:

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

/* The child needs no special CSS */
.child {
  /* nothing required */
}

Requires the parent to have a defined height for vertical centering. If the parent wraps to content height, there's no extra space to center in vertically — add min-height: 100vh or a fixed height.

Method 2: CSS Grid

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

/* For a single child, this is the most concise method */

place-items: centeris the most concise centering solution in CSS. One line. Works for both axes simultaneously. Use Grid when you're already using Grid for layout; use Flexbox otherwise.

Method 3: Absolute positioning + transform

.parent {
  position: relative;
}

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

Works regardless of the child's dimensions — the transform shifts the element back by half its own width and height. Use this when:

• The child must overlap other content (positioned on top of something)
• You need to center something inside a parent that can't be flex/grid (rare)
• You're centering a loading spinner or modal overlay on the viewport

Method 4: margin: auto (horizontal only)

.child {
  width: 600px;    /* must have explicit width */
  margin-left: auto;
  margin-right: auto;
  /* shorthand: margin: 0 auto; */
}

The classic technique — still correct for horizontally centering a block element with a known width. Common for page content containers:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

Does not center vertically. Use this for page layout wrappers, article containers, and any block that should be horizontally centered with defined max-width.

Method 5: text-align: center (inline elements)

.parent {
  text-align: center;
}

/* Centers inline/inline-block children: text, images, buttons */

Only works for inline and inline-block elements (text, <img>, <button>, inline-block <div>). It does not center block-level divs — those need margin auto or flex/grid.

Centering full-screen (modal overlays)

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

.modal {
  /* no special centering needed — flex parent handles it */
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}

inset: 0 is the modern shorthand for setting all four sides to zero — making the overlay fill the entire viewport. Combined with flex centering on the parent, the modal is centered regardless of its size.

Centering vertically within the viewport

/* Simple full-page centering */
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* Or with grid: */
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
}

The decision guide

Related tools

• Free CSS Minifier — minify your CSS after building your layout
• CSS Gradient Generator — add gradients to your centered containers

Written by Achraf A., founder of TheFreeAITools.