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
2 Replies
lko
lko8mo ago
Because if you say:
body min-height: 100vh;
main min-height: 100%;
body min-height: 100vh;
main min-height: 100%;
The main doesnt know how much 100% is since the body doesnt have a height
patrick
patrick8mo ago
yh it has to be a fixed height
Want results from more Discord servers?
Add your server