Step-by-step
-
1
Center with Flexbox
The classic three-liner. Apply these three declarations to the parent element, and any child — regardless of its size — will be centred both horizontally and vertically.
css.parent { display: flex; align-items: center; justify-content: center; } -
2
Use Grid place-items for Even Less Code
place-itemsis a shorthand foralign-items+justify-itemson a Grid container. One declaration does what three Flexbox lines do.css.parent { display: grid; place-items: center; } -
3
Center Horizontally Only with margin-inline
When you only need horizontal centering and the element has a defined width,
margin-inline: autois the cleanest solution. It sets left and right margins toautousing logical properties — so it works correctly in both LTR and RTL layouts without any adjustment.css.card { width: 640px; max-width: 100%; margin-inline: auto; } -
4
Center Text Inside an Element
For centering inline content (text, inline images, buttons),
text-align: centeris still the right tool. It does not center the element itself — only the content inside it.css.hero-text { text-align: center; } -
5
Use place-content as a Grid Shorthand
place-contentis a shorthand foralign-content+justify-contenton a Grid container. Unlikeplace-items, it affects how the entire grid track is distributed — useful when you have multiple rows or columns and want the whole group centred.css.parent { display: grid; place-content: center; gap: 1rem; } -
6
Know Which Technique to Use When
Each approach has a clear use case:
- Flex three-liner — general purpose; works on any parent with multiple children.
- Grid
place-items: center— single child or when you already have a Grid layout. margin-inline: auto— block-level centering when the element has an explicit width.text-align: center— centering inline content only.
Avoid using absolute positioning + negative margins or the
translate(-50%, -50%)trick for new code — they break with dynamic sizes. -
7
Build a Full-Screen Centered Card
The most common real-world use case: a centred card on a full-screen hero or login page. Use
100dvhinstead of100vhso the layout accounts for mobile browser chrome (address bar, nav bar).css.screen { display: grid; place-items: center; min-height: 100dvh; padding: 1rem; /* prevents edge-bleed on small screens */ } .card { width: 400px; max-width: 100%; padding: 2rem; border-radius: 0.75rem; background: white; box-shadow: 0 4px 24px rgb(0 0 0 / .08); }
Tips & gotchas
- Use <code>min-height</code> instead of <code>height</code> on the parent so the container can still grow if the content is taller than the viewport.
- <code>100dvh</code> (dynamic viewport height) is safer than <code>100vh</code> on mobile — it accounts for the browser chrome (address bar, bottom nav).
- For RTL layouts, always prefer logical properties (<code>margin-inline</code>, <code>padding-block</code>) over physical ones (<code>margin-left</code>, <code>padding-top</code>).
- Grid's <code>place-items: center</code> centres items at the cell level. If you have a multi-row grid, combine with <code>place-content: center</code> to also centre the grid tracks.
Wrapping up
You now have a complete toolkit for centering in CSS. The rule of thumb: reach for Grid place-items: center first — it is the most concise. Fall back to the Flexbox three-liner when you need axis-specific control, and use margin-inline: auto for block-level elements with a fixed width. The days of position: absolute; top: 50% are over.