hitmorecode• 6,230
@hitmorecode
Posted
If you set min-height and add flexbox to the body, you don't need to use margin to place the card in the middle of the page.
body{
background-color: hsl(212, 45%, 89%);
/* add these lines to place the card in the middle of the page. */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card{
width: 320px;
height: 500px;
background-color: white;
border-radius: 20px;
margin-bottom: 20px;
/* margin: 100px auto; */ /* you don't need this line. flexbox will take care of this */
}
0
