I found it challenging to [describe the specific challenge, e.g., vertically center the div]. The approach I took was [briefly describe your approach], but I'm open to suggestions on a more effective method.
I'm unsure about the [specific code snippet, e.g., CSS flexbox properties] I used for centering. I would like feedback on whether this is a recommended approach or if there's a better way to achieve the same result.
I'm interested in learning more about best practices for centering elements in CSS. Are there any recommendations or considerations I should be aware of based on my current implementation?
Here's a snippet of my code for reference:
<!-- Your HTML code here -->
<div class="centered-div">
<!-- Content goes here -->
</div>
.main-div {
background-color:hsl(0, 0%, 100%) ;
width: 30%;
margin: 60px auto;
padding: 20px;
border-radius: 15px;
}
@0x-UG
Posted
What I normally do to make sure divs are centered is to make the whole page body a flexbox, with a column direction and then align and justify to center. It's the most reliable for me body { display : flex; flex-direction: column; align-items : center ; justify-content: center; }
Marked as helpful
@beowulf1958
Posted
Great job on the first challenge
A more reliable way to center a component is to use flex on the parent
.main-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Hope this helps.
Marked as helpful
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
