How to center a div.
Four methods, one answer.
The most-asked CSS question on the internet. There is no single "correct" answer — there are four methods, each appropriate in a different context. Flexbox for both axes, grid for both axes with one line, absolute positioning for modals and overlays, auto margins for horizontal-only block content. This page covers all four, with the reason to pick each and the mistakes to avoid.
Short answer: For both axes, use display: grid; place-items: center; on the parent. For both axes with flex, use display: flex; justify-content: center; align-items: center;. For horizontal-only block content, use margin-inline: auto; on the child with a max-width. For modal overlays, use position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. That's the whole answer.
✅ The four methods
Each one fits a specific situation.
Grid + place-items
display: grid; place-items: center; on the parent. Both axes, one line. Modern default for full-container centering.
Flexbox
display: flex; justify-content: center; align-items: center; on the parent. Both axes, most widely known.
Margin auto
margin-inline: auto; on the child with max-width. Horizontal only, block content in normal flow.
Absolute positioning
position: absolute; inset: 50%; transform: translate(-50%, -50%);. For modals and overlays — takes the child out of flow.
✅ Both axes — grid
The shortest, most direct answer.
.parent {
display: grid;
place-items: center;
min-height: 100vh;
background: #f5f5f5;
}
.child {
padding: 2rem;
background: white;
border-radius: 8px;
}
✅ Centered horizontally and vertically. ✅ No child CSS needed for the centering. ✅ Works with any child size. ✅ min-height: 100vh makes the parent fill the viewport — otherwise the parent is as tall as its content and vertical centering does nothing. ⚠️ For full-viewport centering, parent needs a height — min-height: 100vh is the standard. Without it, the parent collapses to the child's height.
✅ Both axes — flexbox
The most widely known method.
.parent {
display: flex;
justify-content: center; /* horizontal /
align-items: center; / vertical */
min-height: 100vh;
}
.child {
padding: 2rem;
background: white;
}
✅ Both axes centered. ✅ justify-content: center → main axis (row). ✅ align-items: center → cross axis (column). ⚠️ If a wide child overflows, add min-width: 0 to the flex item, or padding to the parent. justify-content: center can clip on overflow. ⚠️ Default flex-direction is row. To center multiple children, wrap or use flex-direction: column. Each child gets equal layout weight.
✅ Horizontal only — auto margins
For block content in normal flow.
.article {
max-width: 65ch;
margin-inline: auto;
padding: 2rem;
}
✅ Horizontal only. ✅ Works on any block element with a width/max-width. ✅ margin-inline is the modern shorthand for margin-left and margin-right. ⚠️ Does not center vertically. Auto margin on the block axis resolves to 0 in normal flow. ⚠️ Needs a width. Without max-width or width, the element fills its container and there is no space to distribute. ✅ Best for: articles, cards, forms — content blocks that sit in a page flow.
✅ Absolute positioning — modals
When the child must be out of flow.
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 2rem;
border-radius: 8px;
}
/* Modern alternative — works without knowing
the modal's width or height: */
.modal-modern {
position: fixed;
inset: 0;
margin: auto;
width: max-content;
height: max-content;
background: white;
padding: 2rem;
}
✅ Removes the child from normal flow. ✅ Centers regardless of sibling layout. ✅ Perfect for modals, tooltips, overlays. ⚠️ transform: translate(-50%, -50%) is required because top/left position the element's top-left corner at the center — the translate shifts it back by half its own width/height. ⚠️ Flexbox and grid are alternatives for modals — use them unless you specifically need absolute positioning (e.g., for animation). ⚠️ position: absolute centers within the nearest positioned ancestor. If .overlay doesn't have position: fixed/relative/absolute, the modal centers within the viewport but is unaffected by overlay's layout.
Don't use position: absolute when flexbox or grid will do. Absolute positioning takes the element out of the document flow — it no longer affects sibling layout, doesn't participate in the parent's height calculation, and needs explicit width/height or the transform trick. Flexbox and grid achieve the same visual result while keeping the element in flow. Use absolute positioning only when you specifically want out-of-flow behavior — modals, tooltips, sticky headers. For everything else, grid place-items: center is shorter, safer, and works.
⚠️ Common mistakes
The centering mistakes that cost real time.
The parent is as tall as its content — no vertical space to center in. Fix: min-height: 100vh on the parent.
text-align: center on a block childOnly centers inline content, not the block. Fix: margin-inline: auto on the child.
margin: 0 auto without a widthNo space to distribute. Fix: add max-width or width.
margin: auto for vertical centering in normal flowAuto margins resolve to 0 vertically. Fix: flexbox, grid, or absolute positioning.
The top-left corner is centered, not the element. Fix: transform: translate(-50%, -50%).
justify-content: center overflows when content is wider. Fix: min-width: 0 on the flex item.
Hard to read — the eye hunts for the start of each line. Fix: left-align body text.
min-height on the overlayThe overlay is only as tall as its content, hiding the rest. Fix: min-height: 100vh or position: fixed; inset: 0.
❓ Frequently asked
How do I center a div in CSS?
Four methods, each for a different context. (1) Flexbox: parent with display: flex, justify-content: center, align-items: center. (2) Grid: parent with display: grid, place-items: center. (3) Absolute positioning: child with position: absolute, top: 50%, left: 50%, transform: translate(-50%, -50%). (4) Auto margins: child with max-width and margin-inline: auto — horizontal only. Flexbox is the answer for 90% of cases, grid is the shortest.
What is the difference between text-align: center and margin: 0 auto?
text-align: center centers inline content inside a block — text, images, inline-block children. It does not center the block itself. margin: 0 auto centers a block element by distributing the remaining horizontal space equally on both sides. It only works if the element has a width and is display: block. text-align: center on a parent centers its children's content; margin: 0 auto on a child centers the child itself.
Why doesn't margin: 0 auto work for vertical centering?
Because auto margin resolution doesn't work on the block axis. When you write margin: 0 auto, the browser computes the remaining horizontal space and splits it between left and right. On the vertical axis, auto margins resolve to 0 for block elements in normal flow. Flexbox and grid are the modern solutions for vertical centering. Alternatively, margin: auto on a flex item works for both axes — but the parent must be display: flex.
Why does my centered div break when the content is too wide?
Two common causes. (1) Fixed width on the centered div — margin: 0 auto with width: 600px breaks when the viewport is 500px. Fix: use max-width: 600px instead of width. (2) Flexbox with a wide child — justify-content: center can overflow when content is wider than the container. Fix: use padding on the container, or min-width: 0 on the flex item.
What is the easiest way to center in 2026?
For both axes: display: grid; place-items: center; on the parent. One line of CSS, works on any child, no child rules required. For horizontal only: margin-inline: auto on the child with a max-width. For text-only: text-align: center. Flexbox is also fine and more widely known, but grid + place-items is shorter and achieves the same thing.
Does centering affect accessibility?
Rarely, but there is one case worth noting: text-align: center for long paragraphs hurts readability — it forces the eye to find the start of each line at a different position. Reserve centered text for headings, short labels, and callouts. Body text should be left-aligned (or right-aligned for RTL). Centering a modal dialog or a button is fine. Centering for layout is accessibility-neutral; centering text content is a readability concern, not an accessibility failure.