@manishsinghraj
Posted
You did great!. About centering the container you can always try with flex.
The object you want to center. You need to make it's parent element as flex. In your case (according to the your code), body should be made to flex.
It's better to have another div element before the card container and after body. As we don't want to make body as flex( not good practice).
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
All you need to do is make it flex.
In order to center it horizontally use justify-content : center.
In order to make it vertically aligned use align-items : center.
And the current min view height should take up to 100vh.
This is the usual pattern one can use to center it.
Marked as helpful