What is the best practice to center a card container with a max-width? Below is how I always do it.
body {
display: grid;
place-content: center;
}
However, when I put a max-width on the container, it always shifts to the left and leave a blank column on the right. Then I have to set margin-left and margin-right to auto to center the container. Any comment will be appreciated. Mahalo.
@kimodev1990
Posted
body {
display : flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Your container ( which is child relative to body ) will be centered.
Hope you find this useful & helpful.
Other than that, Nice work and keep going on.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
