How to Center a Div in CSS — All 5 Methods (2026)

The most-googled CSS question of all time. Here are all the answers, best first.

1. Flexbox (use this)

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

2. Grid (even shorter)

.parent { display: grid; place-items: center; }

3. Position + transform (overlays/modals)

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

4. Margin auto (horizontal only)

.child { width: 300px; margin-inline: auto; }

5. Text-align (inline content only)

.parent { text-align: center; }

Interview tip: say flexbox first, then mention transform for absolutely-positioned elements — that shows you understand both normal flow and removed-from-flow elements.

← All Articles