QR component using FlexBox

Community feedback

• 

  Vlad•10

  @alittlebytePosted over 1 year ago

  Two popular routes for both horizontal and vertical alignment would be:

  • Absolute positioning and transform:translate after
  • CSS flex on the body and using the properties to center (since you have just a single element)

  2
• 

  Stefan3002•140

  @Stefan3002Posted over 1 year ago

  To center something the right way you should wrap that element in a div that spans the whole screen (in this case you can actually use the body itself) and then say:

  display: flex; justify-content: center; align-items: center;

  This way you will get a centered component inside the wrapper.

  1

  ---

  

  karan-5•60

  @karan-5Posted over 1 year ago

  tried this method but unable to center in vertical axis.@Stefan3002

  0

  

  Stefan3002•140

  @Stefan3002Posted over 1 year ago

  Make sure your container has a height of 100vh. This might be necessary even for the body. @karan-5

  Marked as helpful

  1