QR Code by basic of HTML and CSS

Hello Dhruv Sagar, good job on finishing this challenge. 💪

Like @RodrigoHLC already told you, to center the .main div vertically, you can use the flexbox layout. You'll need to make a few adjustments to your CSS.

Here's how you can do it:

body {
    background-color: rgba(200, 222, 231, 0.89);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensures the body covers the full viewport height */
}

With this, the body element is set to flex display, with both justify-content and align-items set to center the .main div both horizontally and vertically within the viewport.

One more thing you can do is use <main></main> instead of <div class="main"></div>. You can find more on this one here → Semantic HTML5 Guide

Great job on your project, and keep up the excellent work! 👍

In regards to centering the component vertically, I've never really understood why using "margin: auto" doesn't work, but you can at least do it by turning the body into a flex container and using its flex properties. You will need to give the body a height property for this to work though.