How to Center a Div in CSS

Written: August 22, 2026

Flexbox is the default modern answer for centering. Grid is equally clean. margin: auto still works for block horizontal centering when a width is set.

Flexbox

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

Grid

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Keep learning

If this walkthrough on center a div in css helped, open the code again and change one input or assumption. Small experiments beat rereading the same example.

Want more step-by-step tutorials like this? Browse blog.xqa.io — and tell us which topic you want next.