QR Code Component Using CSS Flexbox

specify the following the body: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh } or body{ min-height: 100vh display: grid; place-items: center;} this should help you with that. There is no need for wrapper div in the html Put the text content in a div and give it a class. In the css file give the class of the text content a padding top and bottom value. Give the img a max-width: 100% instead of resizing it . Use rem or em as unit for you padding and margin values Hope am helpful. Happy coding.

Hello @toshihikotani, maybe this will help and improve your code:

• Try to wrap your div element with "main" element for accessibility purposes and It's best practices that your page contain a main element.
• use "h1" instead of "h2"
• your concern about centering a div content, try to apply flexbox in you body element

Hope it helps, Thanks.

Hi Toshihiko!

Nice job! You're almost there centering your card. Since you already have the correct flex properties on #wrapper, all you need to do is make this same element take the full width of the screen. You might want to set min-width on your html and body elements as well. I would do 100vw since this card is expected to take the full screen, and your wrapper width: 100%.

Hope this helps!

Hello Toshihiko, to center the content u could use Display Flex like this:

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

than the content should be centered :)

Nice solution by the way. It looks close to the original.

greetz Padse