@RealKendpr
Posted
To center your card both vertically and horizontally, you can use grid
:
1.Make sure that your card is wrapped inside one div
:
<div class=container> //this can also be the body tag directly
<div class=card>...</div>
</div>
2.And then the .card
in CSS:
.card {
display: grid;
place-items: center; //this is a shorthand for:
//justify-content: center; and align-items: center;
}
-
You can read more about grid here: A Complete Guide to CSS Grid
-
and centering a div here: 7 ways to center with CSS