QR code design using html and css beginner

You managed to center the item horizontally by using margin: 130px auto;, but vertically it will always be 130px from the top. To improve on this you can try using flexbox or grid. Both allow you to center elements. For this to work for your code, we will first need to change the body declaration to:

body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-design {
    background-color: hsl(0, 0%, 100%);
    border-radius: 5%;
    width: 265px;
    height: 415px;
    text-align: center;
}

Or you can choose to use grid:

body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.main-design {
    background-color: hsl(0, 0%, 100%);
    border-radius: 5%;
    width: 265px;
    height: 415px;
    text-align: center;
}

For this case I think it is better to go with a width in px, otherwise your card will shrink on smaller screens and we also don't need it to grow.