Design comparison
Solution retrospective
Can you suggest me good way to center vertically this type of divs? I just used margin to make illusion of centering.
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hi Nasyr Akhmadov, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:
A good practice to center content is using
grid
orflex-box
, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:Flex-box:
body { display: flex; align-items: center; justify-content: center; flex-direction: column; min height: 100vh; }
GRID
body { display: grid; min height: 100vh; place-content: center; }
The rest is great!
I hope it helps... 👍
Marked as helpful1 - @ahmedhanyhPosted almost 2 years ago
Hey Nasyr Akhmadov! I hope you're well. Congratulations on completing your project!
To center the div container both vertically and horizontally, you will need to use one of two layout methods, either using flexbox or grid.
Resources to learn about flexbox:
Resources to learn about grid:
How to use them to center the container:
- Using Flexbox:
Change the display of the container's parent element (in this case the <body> element) to
flex
(so that all its children would become flex items on which you could apply flex properties), then you can use the space distribution and alignment properties, justify-content and align-items, to center the container like this:
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
- Using Grid:
In a similar manner, you can use CSS Grid to center the div container. Set the display property of the body to
grid
, then use the space distribution or alignment properties, justify-content (or justify-items) and align-content (or align-items) to center the container like in this CSS:
body { min-height: 100vh; display: grid; justify-content: center; /* or justify-items: center; */ align-content: center; /* or align-items: center; */ }
You can also use the shorthand property
place-content
(orplace-items
) to set both properties at once, so the above code snippet would become shorter like so:body { min-height: 100vh; display: grid; place-content: center; /* place-items: center; */ }
In both cases we had to give the body a height, otherwise it would only be as high as its content.
Hope I've helped. I wish you the best with your FEM journey!
Marked as helpful1@darrowvPosted almost 2 years ago@ahmedhanyh thank you for detailed answer. I wasn't sure about giving height in vh, so I couldn't use flex or grid to center it vertically. Now I will be more confident about it.
1 - Using Flexbox:
Change the display of the container's parent element (in this case the <body> element) to
- @naida1210Posted almost 2 years ago
Hello Nasyr! How are you? There is a possible answer to your question: to center elements inside of the divs you may use flex .div { display: flex; justify-content: center; align-items:center; }
or .div { display: flex; flex-direction:column; justify-content: center; align-items:center; } I hope it helps. Good luck!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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