@danielmrz-dev
Posted
Hello there!
Congrats on completing the challenge! ā
Your project is looking fantastic!
I'd like to suggest a way to make it even better:
- 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!
Marked as helpful
@vanimittal1304
Posted
@danielmrz-dev I don't know why, but I always use this method to center my components, yet they always end up centered horizontally and not vertically. Perhaps there are some properties that are overriding this behavior, but I'm not entirely sure of the exact reason.
@danielmrz-dev
Posted
@vanimittal1304
Make sure you always add min-height: 100vh
. That part helps your code center your card vertically because it uses the user's screen height to place it in the middle of the page.
Marked as helpful
@vanimittal1304
Posted
@danielmrz-dev Okay, Thank You Sir for helping me.