Centering recipes
Six ways to centre something, and which one to use when.
<div class="demos">
<figure>
<figcaption>1. Grid — both axes</figcaption>
<div class="box grid-both"><span>Centred</span></div>
</figure>
<figure>
<figcaption>2. Flex — both axes</figcaption>
<div class="box flex-both"><span>Centred</span></div>
</figure>
<figure>
<figcaption>3. Horizontally, known width</figcaption>
<div class="box margin-auto"><span>Centred</span></div>
</figure>
<figure>
<figcaption>4. Absolute, unknown size</figcaption>
<div class="box abs"><span>Centred</span></div>
</figure>
<figure>
<figcaption>5. Text and inline content</figcaption>
<div class="box text"><span>Centred</span></div>
</figure>
<figure>
<figcaption>6. One item pushed to the middle</figcaption>
<div class="box flex-row"><i>left</i><span>Centred</span><i>right</i></div>
</figure>
</div>* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 20px; }
/* ============ the six recipes ============ */
/* 1. grid — the shortest way to centre on both axes */
.grid-both {
display: grid;
place-items: center;
}
/* 2. flex — the same result, useful when the child must also grow */
.flex-both {
display: flex;
align-items: center;
justify-content: center;
}
/* 3. margin auto — horizontal only, needs a width on the child */
.margin-auto > span {
display: block;
width: 120px;
margin-inline: auto;
margin-block: auto;
}
.margin-auto { display: flex; }
/* 4. absolute — when the element is out of flow, e.g. a modal or a badge */
.abs { position: relative; }
.abs > span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 5. text-align plus line-height — for a single line of inline content */
.text {
text-align: center;
line-height: 120px;
}
/* 6. space-between with an auto margin, to push one item to the centre */
.flex-row { display: flex; align-items: center; justify-content: space-between; }
.flex-row > span { position: absolute; left: 50%; transform: translateX(-50%); }
.flex-row { position: relative; }
/* ============ demo chrome ============ */
.demos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
figure { margin: 0; }
figcaption { font-size: .82rem; color: #8593ab; margin-bottom: 7px; }
.box {
height: 120px;
background: #fff;
border: 1px solid #e2e7ef;
border-radius: 10px;
background-image:
linear-gradient(#eef1f6 1px, transparent 1px),
linear-gradient(90deg, #eef1f6 1px, transparent 1px);
background-size: 20px 20px;
background-position: center;
}
.box span {
background: #3b4fe4;
color: #fff;
font-size: .85rem;
padding: 7px 15px;
border-radius: 7px;
white-space: nowrap;
}
.box i { font-style: normal; font-size: .76rem; color: #a9b4c5; padding: 0 12px; }How it works
"How do I centre a div" is the most-asked question in CSS, and the honest answer is that it depends on which axis, whether you know the size, and whether the element is in flow.
1. place-items: center on a grid is the shortest correct answer for both axes. Two words. It works regardless of the child's size, and it works on any number of children.
2. Flexbox with align-items and justify-content gives the same result. Reach for it when the child also needs to grow, shrink or sit alongside siblings that do — flex controls the main axis in ways grid does not.
3. margin-inline: auto centres a block horizontally, and it needs a width on the child. A block element with no width fills its parent, so there is no leftover margin to distribute. This is the oldest recipe and still the right one for a centred page container.
4. Absolute plus translate(-50%, -50%) is for elements taken out of flow — a modal, a badge on an avatar, a close button. The translate handles the element's own size, which is why it works when you do not know the dimensions.
5. text-align: center centres inline content, not blocks. Matching line-height to the container height centres a single line vertically, which is exactly how button labels are centred. It breaks the moment the text wraps to two lines.
6. Absolute inside a flex row is how you centre one item against the container rather than against its siblings. With justify-content: space-between alone, the middle item is centred in the space left over, so it drifts as the side items change width. This is why a centred logo in a navbar moves when the menu length changes.
Accessibility notes
Centring is purely visual and changes nothing in the accessibility tree, with one caveat: absolute positioning takes an element out of flow visually but not in the DOM, so tab order follows the source. If you absolutely position something into a different visual position, check that tabbing through the page still moves in a sensible direction.
Avoid centring long paragraphs. Centred text has a ragged left edge, so the eye has to find the start of every line — measurably slower to read, and harder for people with dyslexia. Centre headlines and short leads; left-align body copy.
Making it yours
For a full-page centre, put display: grid; place-items: center; min-height: 100dvh on the body. dvh rather than vh so mobile address bars do not push the content off screen.
place-items is shorthand for align-items and justify-items. place-content is the equivalent for the whole track set, which is what you want when centring a grid of several items rather than each item in its own cell.
Related templates
Holy grail layout
Header, footer, two sidebars and a main column — in nine lines of grid.
HTMLCSSResponsive grid without media queries
Four grid recipes that reflow on their own, using auto-fit, minmax and container queries.
HTMLCSSSticky footer
A footer that sits at the bottom of the viewport on short pages and below the content on long ones.
HTMLCSSJavaScriptProduct card
An e-commerce card with image, price, rating and an add-to-basket action.
HTMLCSSTailwindCheck your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.