Centering Elements with margin: 0 auto; — The Classic CSS Trick

To center a block element horizontally:

.centered {
    width: 600px;
    margin: 0 auto;
}

The element centers within its parent. This works for divs, sections, articles—any block-level element.

How It Works

The margin shorthand sets four margins:

margin: top right bottom left;

With two values:

margin: vertical horizontal;

So margin: 0 auto means:

Top and bottom: 0
Left and right: auto

The auto keyword tells the browser to calculate the margin automatically. For horizontal margins on a block element with a defined width, the browser distributes available space equally on both sides.

If the container is 1000px wide and the element is 600px wide:

Available space: 1000 - 600 = 400px
Left margin: 400 / 2 = 200px
Right margin: 400 / 2 = 200px

The element sits in the center.

Why Width Is Required

Without a width, block elements expand to fill their container. There's no extra space to distribute:

.not-centered {
    margin: 0 auto;  /* Doesn't center - no width defined */
}

The element is still 100% wide. auto margins become 0 because there's no space left.

You need a width:

.centered {
    width: 600px;
    margin: 0 auto;  /* Now it centers */
}

Or max-width:

.centered {
    max-width: 600px;
    margin: 0 auto;  /* Responsive: centers when wider than 600px */
}

max-width is better for responsive design. The element shrinks on small screens instead of overflowing.

Why Not margin: auto?

You might wonder why not just margin: auto (all four sides):

.element {
    margin: auto;
}

Vertical auto margins behave differently. They collapse to 0 in normal flow. Only horizontal auto margins center.

So margin: auto sets top/bottom to 0 anyway, making it equivalent to margin: 0 auto for block elements.

Use margin: 0 auto to be explicit about vertical margins.

Centering with Flexbox

Modern CSS offers flexbox, which centers without specifying width:

.container {
    display: flex;
    justify-content: center;  /* Horizontal centering */
}

Or on the item itself:

.container {
    display: flex;
}

.item {
    margin: 0 auto;  /* Works in flex container too */
}

Centering with Grid

Grid provides another option:

.container {
    display: grid;
    place-items: center;  /* Center both axes */
}

Or just horizontal:

.container {
    display: grid;
    justify-items: center;
}

When to Use margin: 0 auto

Use margin: 0 auto when:

You have a fixed or max-width content area
You're working with legacy code
The parent isn't a flex or grid container
You want simplicity without changing layout context

Use flexbox when:

You're building a layout system
You need vertical centering too
You have multiple items to align

Common Centering Patterns

Centered content wrapper:

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;  /* Breathing room on small screens */
}

This is the classic "container" pattern. Content stays readable width, centered on wide screens.

Centered form:

.form {
    width: 400px;
    margin: 50px auto;  /* Centered with top margin */
}

Centered card:

.card {
    max-width: 600px;
    margin: 20px auto;
}

Vertical Centering (The Hard Part)

margin: auto doesn't vertically center in normal flow. You need a different approach:

Absolute positioning:

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Flexbox:

.parent {
    display: flex;
    align-items: center;  /* Vertical */
    justify-content: center;  /* Horizontal */
    height: 400px;
}

Grid:

.parent {
    display: grid;
    place-items: center;
    height: 400px;
}

Flexbox and grid are cleaner for true centering (both axes).

Inline Elements

margin: 0 auto doesn't work on inline elements (<span>, <a>, <img> by default). They need display: block or inline-block:

img {
    display: block;
    margin: 0 auto;  /* Now it centers */
}

Or use text-align: center on the parent for inline elements:

.parent {
    text-align: center;
}

img {
    /* Stays inline, centered by parent */
}

Browser Support

margin: 0 auto works in every browser, including IE6. It's one of the oldest centering techniques and the most widely supported.

Debugging

If margin: 0 auto isn't centering, check:

Does the element have a width? (or max-width?)
Is it a block element? (not inline or inline-block without width)
Is there conflicting positioning? (absolute/fixed positioned elements ignore auto margins in normal flow)
Are there float properties interfering?

Browser DevTools show computed margins. Check if auto resolved to 0 instead of distributing space.