@AliMahmoud21
Posted
Hi Bezies, I suggest you use the next code to center the card instead of using the transform: body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 1.5rem; }
Marked as helpful
@Bezies
Posted
@AliMahmoud21 Thanks for your tips. I just tried it, it actually works. Why do you think it's better than the transform / translate solution that I've seen in several video tutorials?
@AliMahmoud21
Posted
@Bezies There are many ways to center the elements on your page. I suggest you read page 72 in "CSS in-depth book" - "Mastering the box model chapter". this section on the page talks about "vertical centering" you will find what you want and you will learn more about this topic. I hope this helps you :)
Marked as helpful
@Bezies
Posted
@AliMahmoud21 Super thank you for the reading advice, I note
