Edited: I got rid of absolute positioning and switched it out for flexbox and also fixed the issue I had with the attribution. Thanks for the feedback, everyone!
I used Flexbox for the main QR Code card and absolute positioning to center it vertically and horizontally. I was a bit confused at first because the top percentage from the absolute positioning wasn't working. After Googling a bit, I found out that it could've been because I didn't initially specify the height of the parent container. So I just gave the height of 100vh to the body. I'm wondering if this is the right way to center an element horizontally and vertically. Please let me know if I did anything wrong or if there is a better way to do this.
Additionally, I couldn't figure out what to do with the attribution class and its content. Since I use absolute positioning for the main QR code part, the attribution part was automatically stuck to the top of the page. I was wondering if there is a way to position this somewhere else like right underneath the QR code card.
