-1

This is my code: 

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

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

.profile-card {
    background-color: orange;
    width: 500px;
}
<body>
    <div class="profile-card">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam animi officia rem nemo, ullam excepturi quo incidunt quibusdam dolores blanditiis.</p>
    </div>
</body>

This is how the output is without the div being centered.

What am I missing here? I am having a hard time understand the default behavior such as this

enter image description here

I tried adding height: 100vh and then it gets centered.

What is the logic? I have been reading articles but still cant wrap my head around these

user12589647
  • 79
  • 1
  • 1
  • 5
  • 1
    `body`'s height is based on its content, so in your case, its height is the same as the `div`'s. That's why `align-items: center;` doesn't magically bring it down, unless you explicitly set your body's height. – technophyle Jul 20 '23 at 17:16
  • I see. So is it always good practice to give a height to the body first when centering something and when the body is display flex? – user12589647 Jul 20 '23 at 17:29

1 Answers1

0

The bodys height is relative with page content, to use all height may you try this

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
Paola Marai
  • 11
  • 2