I used transform / translate for center the box

Community feedback

• 

  Ali Mahmoud•390

  @AliMahmoud21Posted almost 2 years ago

  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

  0

  ---

  

  Bezies•1,230

  @BeziesPosted almost 2 years ago

  @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?

  1

  

  Ali Mahmoud•390

  @AliMahmoud21Posted almost 2 years ago

  @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

  0

  

  Bezies•1,230

  @BeziesPosted almost 2 years ago

  @AliMahmoud21 Super thank you for the reading advice, I note

  1