QR Code Component

Hi Real Prodigy! 👋 Congratulations on succesfully finishing challange! 🎉

To center a div to the middle of the screen, you can use flexbox on body. To do this, you write:

min-height: 100vh; /* We make sure that body covers entirety of the screen so then we can center all elements on screen, we use min-height instead of height, so we dont have any responsiveness issues that would be caused by changed size of the screen  */
display: flex; /* There we set display of body to flexbox */
flex-direction: column; /* Sets direction of flexbox to column */
justify-content: center; /* Centering elements inside body on main axis */
align-items: center; /* Centering elements inside body on cross axis */

You can also do this to main element of your page:

margin: auto; /* Setting margin to auto pushes .attribution section to the bottom of the screen, because that way margin covers all the available space */

I hope you find my answer helpful and I wish you happy coding! 😃 Keep up your great work! 😊