QR-code-compnent using CSS flex property

What are you most proud of, and what would you do differently next time?

I am proud of the fact that I was able to create my first html,css challenge by taking a little help from mdn and css-tricks, next time I will try to complete it without any online help.

What challenges did you encounter, and how did you overcome them?

I encounter the challenge of flex box property. When I made the body a flex and set justify-contents to center the 'attribution' div was in row with the card to i added flex-direction: column to make it go below the card but by doing so the justify-contents: center no longer worked, then i tried align-contents: center it still didn't work. Finally when i changed it to align-items: center the card was in the center of the screen.

What specific areas of your project would you like help with?

code 1:

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

code 2:

body{
    display: flex;
    flex-direction: column;
    align-content: center;
}

code 3:

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

I want to know why code 1 and code 2 were not able to center the body while code 3 does it.