Responsive QR Code Page

Great job on completing your first project on Frontend Mentor! It’s an exciting milestone, and I appreciate your effort. 😊

Now, let’s address the issue you faced with centering a <div>. Centering elements can be tricky, especially when you’re just starting out. Here are some suggestions to improve your code:

Centering Elements:

1. Consider using Flexbox or Grid for more consistent results.
2. For horizontal centering, use justify-content: center; (Flexbox) or place-items: center; (Grid).
3. For vertical centering, use align-items: center; (Flexbox) or place-items: center; (Grid).

CSS Reset: Consider using a CSS reset to remove default browser styles. This ensures a consistent starting point for your styling. EX: *{ margin: 0; padding: 0; box-sizing: border-box; }

You should add it first thing in the CSS file using the universal selector *{ } OR add it to the body { }

Remember, practice makes perfect! Keep experimenting, learning, and building more projects. Happy coding! 🚀

Hello, @meher-hex!

Your project is looking fantastic!

About your question:

Centering the div. Whenever I use margin: auto or any other common solutions, it sits in the center but not exactly at the middle of the page. It's stuck to the top. That's what I need help with.

• Using margin isn't always the most effective method for centering an element.

Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

I hope you find this helpful!

Keep up the excellent work!