QR code component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 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!

  21

  Marked as helpful
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-Montano

  Posted almost 3 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!

  11

  Marked as helpful
• 

  Malik Elbadri•590

  @Maliklar

  Posted almost 3 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.

  11

  Marked as helpful