What is the CSS Centering Guide?
Find the right CSS centering technique for your situation. Pick your element type and context - get the minimal code that works.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Centering Guide
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Describe your centering need
Select what you are centering: text, a block element, an image, a modal, or an unknown-size element. Then choose the context.
Pick the technique
The guide shows all applicable approaches, sorted by simplicity. Each technique is explained with the exact trade-offs.
Copy the minimal CSS
Click Copy next to the technique you choose. The output contains only the properties you need - no extra declarations.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Center anything - modern approach */
.parent {
display: grid;
place-items: center;
}
/* Flexbox centering */
.parent-flex {
display: flex;
justify-content: center;
align-items: center;
}
/* Center block element horizontally */
.centered-block {
margin: 0 auto;
width: fit-content;
}
/* Absolute centering */
.parent-abs { position: relative; }
.child-abs {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}place-items: center on a grid container is the shortest working solution for centering both axes in modern browsers.
Pro tips for better results
display: grid; place-items: center is the shortest solution
Two lines center any single child horizontally and vertically. It works for any child size. Supported in Chrome 59+, Firefox 45+, Safari 11+.
margin: 0 auto only centres horizontally
margin: auto on a block element centres it horizontally, but only if the element has an explicit width less than the container width. It does nothing for vertical centering.
text-align: center only applies to inline content
text-align: center centres text and inline elements (like img) within their container. It has no effect on block elements like div.
The translate(-50%, -50%) technique works for any known-or-unknown size
top: 50%; left: 50%; transform: translate(-50%, -50%) centres an element of any size because translate percentages are relative to the element itself, not its parent.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.