@danielmrz-dev
Posted
Hello, @3kori!
Your project is looking fantastic!
I'd like to suggest a way to make it even better:
- Using
marginisn'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!
Marked as helpful
@3kori
Posted
Hello, @danielmrz-dev. Thank you for the suggestion. I will make the corrections and apply this to all my projects.
@3kori
Posted
Hi @danielmrz-dev,
Just a follow-up question.
Why wouldn't I use the grid property for the body like the one below to center the container?
body {
min-height: 100vh;
display: grid;
justify-content: center;
align-items: center;
}
And why is min-height: 100vh; important in centering the container?
@danielmrz-dev
Posted
@3kori
Yes. That works with grid too.
min-height: 100vh is important because the align-items property centers the element based on the user's screen viewport height. That's why you need that.
@3kori
Posted
@danielmrz-dev
Understood! Thank you again.
