How to Center a Div in CSS

Method 1: Flexbox (Recommended)

Flexbox is the modern standard for centering. Apply these three properties to the parent container:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.child {
    /* your div content */
}

• justify-content: center — centers along the main axis (horizontal by default).
• align-items: center — centers along the cross axis (vertical by default).
• height: 100vh — gives the parent full viewport height so vertical centering has room to work.

Method 2: Grid with place-items (One-Liner)

Grid with place-items is the shortest way to center anything:

.parent {
    display: grid;
    place-items: center;
    height: 100vh;
}

That's it. Two lines on the parent, and the child is centered both ways. place-items: center is shorthand for align-items: center and justify-items: center.

Method 3: Grid with justify and align

If you prefer explicit properties, Grid also accepts justify-content and align-content:

.parent {
    display: grid;
    justify-content: center;
    align-content: center;
    height: 100vh;
}

This is functionally equivalent to the Flexbox method but uses Grid's track alignment system.

Method 4: Auto Margins (Horizontal Only)

The classic horizontal centering method — still the simplest for that specific case:

.child {
    width: 300px;      /* width is required */
    margin: 0 auto;
}

Important: The child must have a defined width for margin: auto to have space to distribute. Without a width, the div stretches to fill its parent and centering has no effect.

Method 5: Absolute Positioning

Use this when you need to center an element without affecting document flow — for example, a modal or overlay:

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

• top: 50%; left: 50% — moves the top-left corner to the parent's center.
• transform: translate(-50%, -50%) — shifts the element back by half its own width and height.