Centering a card on the page, best practice
I am trying to center a card (vertically and horizontally), it's a simple html layout:
<body>
<main>
<section class="card">
</section>
</main>
</body>
To center the card, I always do:
body {
min-height: 100vh;
}
main {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
But my question is, why doesn't it work if I put on the main (min-height: 100%) instead of 100vh? Shouldn't it be 100% of the parent container (which is the body that has 100vh)?
With min-height: 100% it only centers horizontally
<body>
<main>
<section class="card">
</section>
</main>
</body>
To center the card, I always do:
body {
min-height: 100vh;
}
main {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
But my question is, why doesn't it work if I put on the main (min-height: 100%) instead of 100vh? Shouldn't it be 100% of the parent container (which is the body that has 100vh)?
With min-height: 100% it only centers horizontally
