QR code component using basic CSS properties

Hello, if you don't want to use flexbox yet, you can apply these properties to the container element.

#container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 0.5rem;
  background-color: hsl(0, 0%, 100%);
}

You can find more information about how this works in this article in the "How to Center a Div Horizontally and Vertically" section. Although don't worry if you don't fully understand it yet. Most of the times, you will see flexbox or grid solutions being favored over this. This is also important to know, but I wouldn't say you must 100% get it or you can't move on with CSS anymore :D.

Also, with the code above you can remove all properties aside border-radius from the image element. And then, you can give a little top and bottom padding to the last component to give it more space like in the designs :).

Good luck in your CSS journey!

Nice job on the qr code. The rendering is really good. To answer your question on how to center the component easier I'd start you off with this:

• body: { min-height: 100vh; display: flex; justify-content: center; align-items: center; }

Since the body has only one child element, this code will make the minimum height of the viewport 100% and center the container on both axis. There are a lot of resources out there to learn flexbox. I suggest starting off with a little bit just to see how things respond. You'll get it pretty quick.

I think with the centering you can either display flex or use the margin property, where you set margin:4rem auto; this will put the container right in the middle, and the 4rem is for the top and bottom margin while the auto is for left and right. I hope this helps, if not you can hit me up on all social media platforms @wondabwoykelvin to help you out.