QR Code Site

Hey there! Congratulations on completing this challenge! ✨🎉

Your solution looks wonderful! 👍 You're curious about the best way to center a div? No problem at all, I'm here to help! In fact, there are a couple of ways that you might find really handy, and one of them involves using Flexbox =>

height: 100vh;
display: flex; 
align-items: center;  /* for vertical centering */
justify-content: center;  /* for horizontal centering */

and the second one would be using a display grid property =>

height: 100vh;
display: grid;
place-content: center;  /* both horizontal &  vertical centering  */

to make sure both methods work, you'll need to set a specific height for the container or body. By compressing the text, if you mean to center it!? you could try putting all the text inside a div and then applying flex property to it.

For a better understanding of these topics, I found these blogs very helpful

1. A Complete Guide to Flexbox
2. A Complete Guide to CSS Grid
3. Centering in CSS: A Complete Guide
4. Fun with Viewport Units

I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨

1. To center a div horizontally and vertically on a webpage, you can use a combination of CSS flexbox or CSS grid along with proper alignment properties. Here's an example using Flexbox:

HTML: <div class="center-div"> <!-- Your content goes here --> </div>

CSS: body { display: flex; justify-content: center; align-items: center; height: 100vh; /* This helps center vertically */ margin: 0; }

.center-div { /* Define div styling here */ }

1. If you want to compress text, you can achieve a similar effect by adjusting the font size, line height, and possibly the letter spacing. Here's an example:

.center-div { text-align: center; font-size: 14px; /* Adjust as needed / line-height: 1.2; / Adjust line height for readability / letter-spacing: -0.02em; / Adjust letter spacing for compression effect */ }

Keep in mind that compressing text too much might reduce readability, so it's important to find the right balance :)