Profile Card challenge

While building this project I ran into 2 issues: First one was centering the card on the page, I tried using:

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

But this didn't center the card vertically, I ended up using:

position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);

This worked, but I'm wondering why display:flex; didn't work (I tried adding it to the body, main and .container)

2nd issue was positioning the profile pic correctly and adding a border. I ended up creating a <div> container for the image. Is that a valid way?

Thanks so much!