What are you most proud of, and what would you do differently next time?
All
What challenges did you encounter, and how did you overcome them?
Img
What specific areas of your project would you like help with?
All
@SvitlanaSuslenkova
Posted
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body). You can use grid instead of flex too(with some changes). Hope you found this comment helpful :)
Marked as helpful
@TedJenkler
Posted
Hi @Lucass151,
Nice project! Another way to center an element is to set the parent to position: relative and the card to position: absolute. Then, you can use top: 50% and left: 50% with transform: translate(-50%, -50%) to center it perfectly. I would typically use Flexbox in most cases, but this method is a quick alternative when you just need to center an element and also works well if you want the card to overlap or be positioned in a specific way.
Continue the great work!
Best, Teodor
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
