Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
everything
What challenges did you encounter, and how did you overcome them?how to center a div bro
What specific areas of your project would you like help with?how to center a div bro
Community feedback
- @mustafasen97Posted 2 months ago
Display: flex; property, Flexbox layout, making it easier to arrange and align elements within a container. It allows child elements (flex items) to be dynamically positioned based on available space.
To use this, go to the HTML tag that is the parent of the tag you want to center and add display: flex;
The parent tag of the .card div is body. That's why we write our code here.
body { background-color: hsl(47, 88%, 63%); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }- We enabled flex feature (Display: flex;)
- We centered the .card div horizontally inside the body (justify-content: center;)
- We centered the .card div vertically inside the body (align-items: center;)
- When using Flexbox, the container (e.g., <body>) needs a height to properly align its child elements. If you don't define a height, Flexbox won't know how much space it has to work with. If <body> has no height, align-items: center; won't work because Flexbox needs a reference point for vertical alignment. (height: 100vh;)
- We reset the margin value for full averaging. (margin: 0;)
By adding this code to the body, you can ensure that the elements in the body are exactly centered.
0
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