@Vyse1986
Posted
This is a really good start! You mentioned needing help centering divs, and IMO the easiest way to center divs is to use Flexbox. Using position works, but you'll need to use more code and it may take longer to troubleshoot. It would look like this
<div class="container">
<div class="container-content">Content 1</div>
<div class="container-content">Content 2</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
gap: 1rem;
}
All the flex items in the container would then be horizontally and vertically centered. The height will only be needed for vertical centering. 100dvh will use up the whole viewport height, so it can be less unless you want the container to be that large. The gap property lets you set a space between items and will be easier to maintain than using <br> to create space.
You'll be able to create responsive layouts more efficiently once you learn Flexbox!
Lastly, try importing the font that is specified in the style guide. Great job overall!
Marked as helpful
@gozica
Posted
@Vyse1986 Thanks for the input! The gap property is great—I had no idea about it before. I really appreciate it!
I tried the way you posted but it won't center the div in the middle of the page. It only centers it horizontally. I do it this way, but I feel like there is still an easier way.
.container{ padding: 10px ; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color:#1F1F1F; border-radius: 15px; width: 280px; height: 530px; }
@Vyse1986
Posted
@gozica You're welcome! Yes, that will center the container in the middle of the page. It may not work perfectly for your code because you have other things going on. Your method works perfectly fine! I recommend learning Flexbox because it will help you with layouts down the road. CSS Grid is another option that may be easier to understand than Flexbox.
Marked as helpful
@gozica
Posted
Thank you!@Vyse1986
