QR code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Martin, welcome to Frontend Mentor Community and congratulations for your first challenge.

  There's many ways to position an element in the screen center, I'll tell you my two favorite ways:

  • FLEX: You add these properties to the container element display:flex; align-items: center; justify-content: center; and don't forget to add height: 100vh to the body tag.

  • GRID: is less used but works, the same previous steps but add the properties display grid; place-items: center ;

  You can check 11 other ways to center in the link below:

  https://blog.hubspot.com/website/center-div-css#:~:text=You%20can%20do%20this%20by,the%20div)%20vertically%20and%20horizontally.

  I hope it helps you bro, keep it up!

  Marked as helpful

  2

  ---

  

  Martin Rečka•20

  @Marty9406Posted over 2 years ago

  @correlucas Thanks for your feedback! I didn't know that there are so many ways to do this. I will try to apply some of these in next challenges.

  1
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hello Martin! Congratulations for your solution.

  You can also use display: flex; justify-content: center; align-item: center;

  This way you will have it centered vertically and horizontally. Important, these properties have to be applied to the container of the element you want to center.

  On the other hand you might be better off writing more semantic code. In this case, the div with the container class can be replaced by a main, section or article tag.

  Cheers!

  Marked as helpful

  1

  ---

  

  Martin Rečka•20

  @Marty9406Posted over 2 years ago

  @Enmanuel-Otero-Montano Thanks for your feedback! I will try to use more semantic code next time.

  0
• 

  Malik Elbadri•590

  @MaliklarPosted over 2 years ago

  Nice work, Your way is of positioning is fine. <br> If you want to center the element, you can also make the body's display as a flex and then make sure the flex body will occupy the how screen (height: 100vh, width: 100vw) after that you can add a single element to the body which is the Card and set the properties of the body to <br> display: flex; align-items: center; justify-content: center;

  this will make the element centered. <br> But your way of centering the position is totally fine because you have a single element to display.

  Marked as helpful

  1

  ---

  

  Martin Rečka•20

  @Marty9406Posted over 2 years ago

  @Maliklar Thank you for your feedback!

  1