QR code component using HTML & CSS

Community feedback

• 

  John Q.•140

  @romrauqPosted 6 months ago

  Try centering the application vertically div by using the following CSS properties and values:

  .target-div{ position: absolute; top: -50%; transform: translateY(-50%) }

  And then remove your current top margin.

  Marked as helpful

  1

  ---

  

  Aditya Rao•190

  @thisisadityaraoPosted 6 months ago

  @romrauq Do I apply position: relative to the parent of .target-div for this to work?

  UPDATE: I ended up using flexbox to center the qr code component.

  1

  

  T

  Grace•31,090

  @grace-snowPosted 6 months ago

  @romrauq this wouldn't be a good way to center this component. It's fine for decorative items but you won't want to do that for blocks of content. Position absolute would remove the component from the document flow so when viewed on smaller screens or when people have a larger default text size the component would overflow the screen.

  There are modern techniques much better suited to this. Making the wrapper into a flex column with min-height in viewport units and flex centering properties would be a much more robust way to center it.

  0

  

  John Q.•140

  @romrauqPosted 6 months ago

  I may need to relearn the method of using flexbox to center components vertically. 😅

  Thanks a lot for your input @grace-snow! 👍🏽

  1