@danielmrz-dev
Posted
Hey there! 🙋🏽♂️
Congrats on completing the challenge! ✅
Your project looks fantastic!
Here's a tip to make it even better:
Using margin and/or padding isn't always the best way to center an element.
Try this method to center an element vertically and horizontally:
📌 Apply this CSS to the body (skip position or margins to make it work correctly):
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Hope this helps!
Keep up the great work!
Marked as helpful
@CelineJames
Posted
Hey @danielmrz-dev, thanks for the review and encouragement. I had done the above code in my css @body, but it still won’t center vertically, it only centers horizontally. However I noticed you included something different. Which is setting the min-height property, I would try that and see if that works.
@danielmrz-dev
Posted
@Kaytorah That property is the most important because this method centers the element vertically based on the user's screen height.
Marked as helpful
@CelineJames
Posted
@danielmrz-dev , Thank you for the suggestion, it worked. I tried it on the second project and it came out closely identical, say 98/100. Thanks a lot. And I’ve gone ahead to study Min and Max width and height values properly.
