How can I center a div both vertically and horizontally using CSS Flexbox?

Question

I'm trying to design a responsive website layout and I need to center a div exactly in the middle of the page (both vertically and horizontally). I've tried using margin and position, but it doesn't work as expected across all screen sizes.

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented May 5 at 12:24

Hakan Yılmaz · Accepted Answer · 2025-05-05 14:33:06Z

0

You can use these for that;

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

/*FLEX*/

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

// OR

/*POSITION-RELATIVE-ABSOLUTE*/

.parent {
    position: relative;
}

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

answered May 5 at 14:33

Hakan Yılmaz

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I center a div both vertically and horizontally using CSS Flexbox?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related