QR code component solution

Hello. I recommend using flex for vertical centering. For example:

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

Don't forget to set min-height because, without this, the height of the body will not stretch to the entire screen.

Another option to center a div is to leverage flexbox. Flexbox turns the layout into a two dimensional axis: main axis and cross axis. You you can then center both axis if you would like.

The align-items property will align the items on the cross axis. The justify-content property is used to align the items on the main axis.

You can review concepts from flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I had the same problem and I wrote this in the container class in css (.container) : margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);