solution with html css flexbox and vanilla javascript
Design comparison
Solution retrospective
I'd like some help with centering divs, I found kind of easy with the horizontal centering but it was difficult when I tried vertical. Any advice or comment about what I did would be really appreciated. Also sorry for my english in advanced, it's not my first language (:
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS π¨:
- Let me explain, How you can easily center the component for better layout without usage of
absolute
positioning.
- We don't need to use
absolute
to center the component both horizontally & vertically. Because usingabsolute
will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here π.
- For this demonstration we use css
Grid
to center the component
body { min-height: 100vh; display: grid; place-items: center; }
- Now remove these styles, after removing you can able to see the changes
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 10%); }
- Now your component has been properly centered.
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @agomez99Posted over 1 year ago
Hello, you can add the <main> tag around around the container, which specifies the main content of a document.
<main> <div class="container" > <div class="main-content"> <h1>Stay updated!</h1>
then modify your CSS to use flex and removing the position properties as follows:
body { background-color: var(--darkSlateGrey); font-size: 16px; } main{ display: flex; align-items: center; justify-content: center; height:100vh; } .container { background-color: var(--white); display: flex; width: 800px; height: 500px; padding: 20px; border-radius: 20px; }
*** I added the correct background color, you may have to adjust your media query css
Marked as helpful0 - @Aimal-125Posted over 1 year ago
In your CSS code, give body element height of 120 or 150vh by using media query with
max-height: 400px;
for screens with small heights so that your web app look good on small screens.1 - @Toheeb345Posted over 1 year ago
you were using transform
transform: translate(-50%, 10%);
The correct way to center a div using the positioning property is
transform: translate(-50%, -50%); β
Try it out!!
1
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