QR Code Component

With your div with a class of qr-card being the child of the body element, you could turn the body into a flex box, justify-content: center, align-items: center and then set the height of that same body element to 100vh, vh is a unit that divides the view height by 100, so you'll have a body element with the same height as view height of the page in your browser, also remove the default margins by adding margin:0px to body. As the body element will be as big as the view height and have no margin and qr-card div will be positioned in the center and in the middle of it, the card will be centralized in the middle of the screen. To summarize: body {display: flex; justify-content: center; align-items:center; height: 100vh; margin:0px)

Another thing you could do is to substitute the first "div" tag to a "main" tag. This will make it easier for people with disabilities to understand your page.

Good job. It looks like you figured out how to center divs. One trick I learned is that to use (margin=0, auto) the width has to be set first to work properly.