How to Center a Div in CSS
There are three real ways to center a div in CSS — Flexbox, Grid, and absolute positioning — and each one needs slightly different rules depending on whether you're centering horizontally, vertically, or both. Pick your axis and method above: the preview centers itself instantly, and the exact CSS for that combination appears below it, ready to copy.
Three Ways to Center a Div in CSS
Flexbox is the most common choice: display: flex on the parent
turns on flex layout, then justify-content: center centers children along the
main axis and align-items: center centers them along the cross axis.
Grid is often shorter — display: grid plus
place-items: center centers on both axes in a single declaration.
Absolute positioning works differently: the parent gets
position: relative, and the child gets position: absolute with a
top/left offset and a transform that pulls it back by
half its own size. All three are real, valid CSS — which one fits depends on whether you can
change the parent's layout mode at all, covered below.
Center a Div Horizontally and Vertically
With Flexbox, set display: flex on the parent along with both
justify-content: center and align-items: center. With Grid, the
parent only needs display: grid and place-items: center — one
property does the job of Flexbox's two. With absolute positioning, the parent needs
position: relative and the child needs position: absolute; top: 50%;
left: 50%; transform: translate(-50%, -50%); — the transform is what corrects for the
child's own width and height, not just its center point.
Center a Div Horizontally Only
In a default row-direction flex container, horizontal centering is
justify-content: center on the parent — align-items is left alone.
In Grid, the equivalent is justify-content: center on the parent as well. With
absolute positioning, give the child left: 50%; transform: translateX(-50%); and
leave top unset.
Center a Div Vertically Only
For Flexbox, vertical-only centering is align-items: center on the parent.
Grid uses the same property name, align-items: center, on the parent. With
absolute positioning, give the child top: 50%; transform: translateY(-50%); and
leave left unset.
Flexbox vs. Grid vs. Absolute: Which Should You Use?
Reach for Flexbox when the parent has other children that also need to lay
out in a row or column — it's the most common layout mode and the rules read clearly.
Reach for Grid when you specifically want to center on both axes with the
fewest properties, or when the parent already uses Grid for other reasons. Reach for
Absolute positioning only when you can't change the parent's
display at all — it takes the child out of normal document flow entirely, which
can collapse the parent's height if nothing else is sizing it, so it's the least flexible of
the three despite being the oldest technique.
Frequently Asked Questions
How do I center a div horizontally and vertically in CSS?
The shortest way is Flexbox: set display: flex,
justify-content: center, and align-items: center on the parent.
Grid does it in one line — display: grid plus place-items: center
on the parent. Pick Both for Axis and either Flexbox or
Grid for Method above to get the exact rules for your case.
How do I center a div in CSS without Flexbox?
CSS Grid centers a div without Flexbox in one declaration: display: grid on
the parent, then place-items: center. Absolute positioning also avoids
Flexbox — give the parent position: relative and the child
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.
Select Grid or Absolute above for the exact rules.
How do I center a div using CSS Grid?
Set display: grid on the parent, then add place-items: center to
center the child on both axes at once. For one axis only, use
justify-content: center (horizontal) or align-items: center
(vertical) instead of place-items.
How do I center a div with position absolute?
Give the parent position: relative so it becomes the positioning context,
then give the child position: absolute with top: 50% and
left: 50%. That alone moves the child's top-left corner to the center point,
so it still needs transform: translate(-50%, -50%) to shift it back by half
its own width and height and land it truly centered.
Why isn't justify-content: center working?
justify-content only has an effect on a flex or grid container, so it does
nothing unless the parent also has display: flex or
display: grid. It's also easy to mix up with align-items: in a
default row-direction flex container, justify-content controls the horizontal
axis and align-items controls the vertical one — swapping them is the most
common reason centering looks like it's "not working."
How do I center a button in CSS?
A button centers exactly like any other element: wrap it in a parent, give that parent
display: flex, justify-content: center, and
align-items: center, and the button centers itself with no extra CSS on the
button. The same Flexbox, Grid, and Absolute techniques on this page apply to a button, an
image, or any other child element.
