How to center a div
Monday 25/07/2022
·4 min readCentering a div sounds trivial, but the right approach depends on what you're centering inside what, and which browsers you need to support. The modern answer is flexbox or grid — both work in every browser released after 2017 and need just two or three declarations. The legacy answer is margin: auto for horizontal centering plus an absolute-positioned transform trick for vertical. Five methods below, ranked by how often I actually reach for them.
1. Flexbox — the default choice
This is what I use first, nearly always. Two lines on the parent and you're done:
.parent {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
height: 100vh; /* needs a height for vertical to be meaningful */
}
.child {
width: 200px;
height: 200px;
background: aquamarine;
}
Works for any number of children, any size, any direction. The only catch: the parent needs an explicit height for vertical centering — otherwise it shrinks to fit the child and align-items: center has nothing to work against.
2. CSS Grid
Same number of lines, arguably cleaner intent:
.parent {
display: grid;
place-items: center;
height: 100vh;
}
place-items is shorthand for align-items + justify-items. Grid is the better fit when centering is one consideration in a larger layout; for a single child it's a wash with flexbox.
3. Absolute positioning + translate
Pre-flexbox this was the standard. Still useful for overlays where the centered element shouldn't affect document flow:
.parent {
position: relative;
height: 100vh;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The translate(-50%, -50%) shifts the child back by half its own width and height — that's the trick that handles centering without knowing the child's dimensions upfront.
4. Margin auto — horizontal only
For horizontal centering of a fixed-width block element, this still works with zero parent setup:
.child {
width: 400px;
margin: 0 auto;
}
Useful for centering page content (<main> containers, article bodies) where vertical alignment doesn't matter. Doesn't work on inline elements, and the child needs an explicit width.
5. Text-align — for inline content
For centering text or inline-block children:
.parent {
text-align: center;
}
Only horizontal, only for inline-flow content. Comes up more than you'd expect for buttons, icons, and small UI elements wrapped in a container.
Edge cases and gotchas
- Vertical centering needs a height. A flexbox or grid parent with
height: autoshrinks to fit the child, makingalign-items: centerinvisible. Use100vh,min-height, or a parent that already has dimensions. - Prefer
min-heightoverheightfor content that grows. If the centered child can become taller than the viewport,min-height: 100vhlets the page scroll instead of clipping. - Margin collapse can sabotage absolute centering. Make sure the positioned parent has
position: relative— otherwise the50%resolves against the nearest positioned ancestor, which might be the<body>. - iOS Safari
100vhincludes the address bar. For full-screen centered overlays on mobile, use100dvh(dynamic viewport height, supported everywhere since 2022) instead.
Picking the right method
| Method | Best for | Skip if | |---|---|---| | Flexbox | 95% of cases | You need IE10 (you don't) | | Grid | Multi-element layouts | You only need to center one thing | | Absolute + translate | Modals, tooltips, overlays | The element should affect flow | | Margin auto | Page-width containers | You need vertical centering | | Text-align | Inline content, buttons | The child is block-level |
FAQ
How do I center a div without flexbox?
Use margin: 0 auto for horizontal centering of a block element with a fixed width, or absolute positioning with top: 50%; left: 50%; transform: translate(-50%, -50%) for both axes without affecting document flow.
Why doesn't align-items: center work in my flexbox?
The flex parent has no explicit height, so it's shrinking to fit the child. Set height: 100vh, min-height on the parent, or place it inside a container that already has dimensions.
Is flexbox or grid faster for centering?
There's no measurable performance difference for a single centered element in any modern browser. Pick based on what reads more clearly to whoever inherits the code.
Can I center a div without setting a height?
For horizontal-only centering, yes — margin: 0 auto needs no height. For vertical centering, you need either an explicit parent height or absolute positioning relative to a sized ancestor.