Submitted almost 2 years ago

Ad with QR code in HTML and CSS

@helmdyck

A solution to the QR code component challenge

Solution retrospective

I couldn't center everything with flexbox so I used "Transform : Translate ". What is the best way to center a simple div like this? Will I always have to try all the options until I see which one works for me?

Code

Please log in to post a comment

Community feedback

Fer•3,970
@fernandolapaz
Posted almost 2 years ago
Hi 👋🏻, regarding your comment:

You could center the content with grid or flexbox:
```
body {
min-height: 100vh;
display: grid;
place-content: center;
}
```
```
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
```
One advantage of this over using translate is to avoid page clipping in viewports with low height (such as mobile landscape orientation).

I hope it’s useful : )

Regards,
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord