QR code project done with Flexbox and Semantic HTML

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Meobot, well done completing your first challenge, and welcome to Frontend Mentor! Yes, there definitely is a better practice, and it's what Nikola described above. Since you already are using flexbox in your body, you can just add align-items:center and min-height: 100vh, and then remove the margin you put in. You'd always need a height when centering because if there's no extra space around the container, the browser would not be able to center the element because centering requires equal spacing around the element. Also, this code works if you only got one child element to center; if you have more children elements (like a footer for example), you'd need to change your flex properties a bit.

  Once again, great job and happy coding!

  Marked as helpful

  1

  ---

  

  Nathan Rhodes•140

  @MeobotPosted over 2 years ago

  @elaineleung Thanks a ton, that helps it make sense.

  0
• Account deleted

  Hi, congrats on finishing the challenge! 💪

  There is a better practice to center the div, and here's how you can do it by using the flexbox.

  On a parent element add this declaration block:

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  

  And that's it! Here you can read more about it: Centering in CSS

  I hope this was helpful.

  Happy coding. 👨‍💻

  Marked as helpful

  1

  ---

  

  Nathan Rhodes•140

  @MeobotPosted over 2 years ago

  @kom42ec Thank you, that works perfectly!

  0