How to Center a Div in CSS: 5 Methods That Actually Work

Why Centering in CSS Confuses Everyone

Centering an element in CSS is a notorious source of frustration for beginners — and even experienced developers occasionally pause to double-check the right approach. The confusion exists because CSS evolved over decades, and today there are at least five distinct methods to center things, each suited to different situations. Understanding why each method works is more valuable than memorizing the syntax.

Before choosing a method, ask two questions: are you centering horizontally, vertically, or both? And do you know the dimensions of the element you're centering? Your answers will determine the best approach.

Method 1: Flexbox (The Best All-Rounder)

Flexbox is the cleanest, most readable way to center elements in modern CSS. It centers both horizontally and vertically with just three lines applied to the parent container — not the element you're centering.

.parent {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  height: 100vh;            /* parent needs a height for vertical to work */
}

justify-content controls alignment along the main axis (horizontal by default). align-items controls alignment along the cross axis (vertical by default). Set both to center and the child element is perfectly centered regardless of its size. This is the method you should reach for in almost every situation.

Method 2: CSS Grid (Even Simpler)

CSS Grid offers an even more concise centering syntax. If you're already using Grid for your layout, this is the most elegant solution.

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

place-items: center is shorthand for both align-items: center and justify-items: center. It's supported in all modern browsers and is arguably the most readable centering code you can write. If you need to center something and you're not constrained to Flexbox, Grid with place-items is a strong choice.

Method 3: Absolute Positioning + Transform

This method works even without knowing the dimensions of the element, and it's useful when you can't modify the parent's display property.

.parent {
  position: relative;
}

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

The top: 50%; left: 50% positions the top-left corner of the element at the center. The transform: translate(-50%, -50%) then shifts the element left and up by half its own width and height, landing it perfectly centered. This technique is especially useful for modal dialogs and overlays.

Method 4: Auto Margins (Horizontal Only)

The classic margin: 0 auto is one of the oldest CSS centering tricks. It only works for horizontal centering, and requires the element to be a block-level element with an explicit width.

.child {
  width: 600px;  /* or max-width */
  margin: 0 auto;
}

This is still the preferred method for centering page content containers — like the main content wrapper on a blog post or article page. It tells the browser: "give equal space on both sides." Without a defined width, the element stretches to fill its parent and there's nothing to center.

Method 5: Text-Align (For Inline Content)

When you're centering text or inline elements (like <span>, <a>, or <img> with display: inline), apply text-align: center to the parent.

.parent {
  text-align: center;
}

This doesn't work on block-level elements like div. Many beginners try applying text-align: center to a div and wonder why it doesn't center — it's because divs are block elements, not inline. For block elements, use one of the first four methods.

When to Use Which Method