Can't center div vertically.

Hello! I managed to center my car div horizontally but can't center vertically. Please help!

<body>
        <div class="card">
            <img src="images/image-product-desktop.jpg" alt="Product">
            <div class="details">Some text here</div>
        </div>
</body>

<body>
        <div class="card">
            <img src="images/image-product-desktop.jpg" alt="Product">
            <div class="details">Some text here</div>
        </div>
</body>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(30, 38%, 92%);
}

.card{
    display: flex;
    width: 300px;
}


.card img{
    width: 50%;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(30, 38%, 92%);
}

.card{
    display: flex;
    width: 300px;
}


.card img{
    width: 50%;
}

10 Replies

Zach•3y ago

html,
body {
height: 100%
}

html,
body {
height: 100%
}

13eck•3y ago

To expand on Zach's (correct) answer, by default flex is only as big as it needs to be, and in this case the card is only as big as the image. So technically it was centered vertically 😜

ShayokhOP•3y ago

Thank you so much man! It worked! I was literally struggling with it

Zach•3y ago

I was waiting for Shayokh's questions to explain further 😛

13eck•3y ago

Making the html and body elements 100% high (I would have gone with 100vh, but zach's not fully wrong lol) you now have vertical height to play with

Zach•3y ago

np 100vh is bad for mobile

13eck•3y ago

it's Good Enough™️ and with the new relative units rolling out it'll be even less good! But let's not get off-topic here

Zach•3y ago

it doesn't adapt to UI element changes on scrolldown. over 50% of the planet use mobile, use a better solution 🤣

13eck•3y ago

I do that enough…

Zach•3y ago

I should get b1 onto you beck

Gaming

Programming

Can't center div vertically.

Did you find this page helpful?