QR Code Component

I always found it difficult to center element inside a div.

display: flex;
align-items: center;
justify-content: center;

Sometimes this code block would work. But sometimes it fails to center any element. In this particular case, when centering the card container in the main body. I did put the property block above in my parent container but it doesn't work. Did some research and asking for help from other friend, and come up with this solution

body {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

What is the best practice for centering an element inside a div?

In which situation I should use the first code block and the second code block in my code?