QR code component solution

Community feedback

• 

  Super Oleksandr•320

  @super-simonPosted over 1 year ago

  Hello. I recommend using flex for vertical centering. For example:

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

  Don't forget to set min-height because, without this, the height of the body will not stretch to the entire screen.

  Marked as helpful

  2

  ---

  

  Sérgio Martin Aguiar•10

  @sergioaguiarPosted over 1 year ago

  Thank you, @super-simon ! I've tried before using display: flex and diodn't get to the result because I was not using min-height.

  I've made other minor changes and I think I am missing the exact design only by a few pixels in bottom margin under the <p>.

  1
• 

  Dion•150

  @dionlowPosted over 1 year ago

  Another option to center a div is to leverage flexbox. Flexbox turns the layout into a two dimensional axis: main axis and cross axis. You you can then center both axis if you would like.

  The align-items property will align the items on the cross axis. The justify-content property is used to align the items on the main axis.

  You can review concepts from flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  Marked as helpful

  1
• 

  Freezy699•30

  @Freezy699Posted over 1 year ago

  I had the same problem and I wrote this in the container class in css (.container) : margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

  Marked as helpful

  0