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>

<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%;
}

*{
    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%;
}

Zach Jensz•9/28/22, 12:39 PM

html,
body {
height: 100%
}

html,
body {
height: 100%
}

13eck•9/28/22, 12:40 PM

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