The quickest way to center a div in 2026 is flexbox: give the parent display: flex with justify-content: center and align-items: center, and the child sits dead center both ways. That single pattern handles the overwhelming majority of cases. Grid is an even shorter alternative, and the old margin: auto trick still wins for simple horizontal centering. The classic absolute-position hacks are no longer necessary in any modern browser.
The methods, ranked by when to use them
Centering is not one problem. It depends on which axis you need and what you are centering. This table maps the situation to the right tool.
| You want to |
Use |
One-line summary |
| Center a child both ways |
Flexbox or Grid |
Set centering on the parent |
| Center horizontally only |
margin auto |
Block element with a fixed width |
| Center text or inline content |
text-align center |
Different job from centering a box |
| Center one item, shortest code |
Grid place-items |
A single declaration on the parent |
Reach for flexbox first. It is readable, well-supported, and flexible if you later add more children.
Flexbox: the default
This is the pattern to memorize. The parent does the work; the child needs nothing special.
.parent {
display: flex;
justify-content: center; // horizontal axis
align-items: center; // vertical axis
min-height: 100vh; // so there is height to center within
}
The min-height matters more than beginners expect. Vertical centering only looks like nothing happened if the parent has no extra height to distribute. Give it room and the centering becomes visible.
Grid: the shortest version
CSS Grid centers a single child in one declaration, which is hard to beat for brevity.
.parent {
display: grid;
place-items: center; // sets both align and justify at once
min-height: 100vh;
}
If you only need to center one element, grid is arguably cleaner than flexbox. For multiple children laid out in a row or column, flexbox usually reads more naturally.
margin auto: simple horizontal centering
For a block element with a known width, the oldest trick still works and needs no flex or grid:
.box {
width: 300px;
margin: 0 auto; // left and right margins share the leftover space
}
This only centers horizontally, and only when the element has a width narrower than its container. It does nothing vertically, so do not reach for it when you need both axes. If any of this feels shaky, a quick refresher on what CSS is will make the rest click.
What to skip
- Skip absolute position plus negative margins. This old hack required knowing exact dimensions and breaks easily. Flexbox or grid replaced it.
- Skip the transform translate trick for new code.
top: 50% with transform: translateY(-50%) works but is more fragile than flex centering.
- Skip confusing text-align with box centering.
text-align: center centers inline content inside a box; it does not center the box itself.
- Skip table-cell hacks. Faking vertical centering with display table is legacy. Modern layout tools are clearer.
FAQ
What is the easiest way to center a div?
Make the parent a flex container with justify-content: center and align-items: center. That centers a child on both axes and is the most common modern approach.
Why does my div center horizontally but not vertically?
Usually the parent has no extra height, so there is nothing to center within vertically. Give the parent a height, such as min-height: 100vh, and it works.
Does margin auto center vertically?
Not in normal flow. margin: 0 auto centers a block element horizontally only. For vertical centering, use flexbox or grid.
Is flexbox or grid better for centering?
For a single item, grid with place-items: center is shortest. For rows or columns of items, flexbox is usually more natural. Both are well supported.
Where to go next
Brush up on what CSS is and how it works, learn HTML and CSS from scratch, and compare Tailwind with plain CSS.