Vlad• 10
@alittlebyte
Posted
Two popular routes for both horizontal and vertical alignment would be:
- Absolute positioning and transform:translate after
- CSS flex on the body and using the properties to center (since you have just a single element)
2
Design comparison
Solution retrospective
I found some difficulty in arranging the components. I am not sure about the vertical alignment of the main container. I want to know about the best practice of aligning the component.
Community feedback
Stefan3002• 140
@Stefan3002
Posted
To center something the right way you should wrap that element in a div that spans the whole screen (in this case you can actually use the body itself) and then say:
display: flex; justify-content: center; align-items: center;
This way you will get a centered component inside the wrapper.
1
karan-5• 60
@karan-5
Posted
tried this method but unable to center in vertical axis.@Stefan3002
0
Stefan3002• 140
@Stefan3002
Posted
Make sure your container has a height of 100vh. This might be necessary even for the body. @karan-5
Marked as helpful
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord