Center an element with Flexbox or Grid

One box, centered inside another, in both directions at once.

BeginnerRead 4 minDoing: 20 minutes5 steps

What you'll have at the end

A box centered both ways inside its container, checked at two window sizes

Before you start

You need

A box element already sitting somewhere on the page, next to other content it should not have to share a layout with.

Not covered

Centering text alone within a line, or a box that must overlap other content instead of sitting in normal flow.

Leans on

Checked 20 Aug 2026