Single page QR Code in the center

Hello, you need min-height: 100vh on body

By default the body has a height according to the elements it has inside.

body {
    margin: 0;

    min-height: 100vh;
    display: grid;
    place-items: center;

    font-family:'Outfit',sans-serif;
    background: hsl(212, 45%, 89%);
}

remember to remove translateY you used in .container

I hope this was useful for you.

You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

.container {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

Some recommendations regarding your code could be of interest to you.

• In order to center the card easily and correctly, you can add flexbox and min-height: 100vh to the body

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

• After adding them, you don't need .container anymore, you can remove it

/* 
.container {
  display: grid;
  place-items: center;
  position: relative;
  transform: translateY(50%);
} 
*/

• If you want to make the card responsive and the image will be positioned completely on the card, you'd better set the image style in this way:

img {
  border-radius: 15px;
  /* max-width: 300px; */
  width: 100%;
  height: 100%;
  display: block;
}

• Having done, you can delete media queries because your solution will be responsive after the updates above.

Hope I am helpful. :)

I wanted to take a moment to appreciate the HTML and CSS project you created. Your dedication to the project is evident in the final outcome, and it's truly impressive. The design, layout, and overall functionality of the project are top-notch, and it's clear that you put a lot of effort into creating it.

I also appreciate your willingness to seek help when encountering a challenge, as demonstrated in your query regarding centering an object vertically. While it's unfortunate that the usual solution of 'display:flex', 'justify-content:center', and 'align-item:center' or 'display:grid', 'place-item:center' didn't work for you, it's great that you were able to find an alternative solution using the transform tag.

Regarding your question about why the usual solution doesn't work for you, it's hard to say without seeing the code. However, one possibility is that it could be a parent-child problem of the DIV, as you mentioned. It's always a good idea to double-check the parent-child relationship and ensure that the proper attributes are applied.

In terms of suggestions, I would recommend sharing your code with a few peers or colleagues to get their feedback. Sometimes an external perspective can help identify areas for improvement or provide alternative solutions to challenges. Additionally, keep up the great work and continue to challenge yourself with new projects and skills.

Overall, thank you for creating such an impressive project and for being proactive in seeking solutions to challenges. I look forward to seeing your future work.

I hope this will help you in your next project. Happy Codding,