QR code component using HTML,CSS media query

👾Hello , congratulations for your new solution!

To make this alignment, first of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

See the code below :

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

🐸 Use this mini game to learn FLEXBOX and all its properties by positioning the frog and become a FLEXBOX MASTER here's the link: https://flexboxfroggy.com/

✌️ I hope this helps you and happy coding!

Greeting AKINFOLA EJIDE!! Congratulations for completing your challenge!, 👏👏👏 well done.

actually you can easily center the content perfectly on the middle of screen using either flex or grid, and you don't really need position on this case, I know that position a letter bit tricky to control.

using grid for example, you can start by using body as a reference to the screen, and give it a min-height:100vh, to fill browser screen size, and form there you can apply grid properties to it.

body {
	
        min-height: 100vh;
	display: grid;
	place-content: center;
	
}

and for container just remove all that position, and control it with max-width, and some margin if needed.

.container {
	/* width: 100%; */
	/* position: absolute; */
	top: 50%;
	left: 50%;
	/* transform: translate(-50%, -50%); */
	margin-block: 2rem;
	max-width: 29rem;
}

Hope this give you some hints!!

Happy Codding, and have a good day/night

Congratulations on completing this challenge. You can place your design perfectly in the middle of the page by using flex. Body { Display: flex; Justify-content: center; Align-items: center; Min-height: 100vh; }

The above code should align the contents to the center