All comments

• 

  Zubair Adham• 400

  @atmahana

  Submitted over 1 year ago

  I always found it difficult to center element inside a div.

  display: flex;
  align-items: center;
  justify-content: center;
  

  Sometimes this code block would work. But sometimes it fails to center any element. In this particular case, when centering the card container in the main body. I did put the property block above in my parent container but it doesn't work. Did some research and asking for help from other friend, and come up with this solution

  body {
      display: grid;
      place-content: center;
      min-height: 100vh;
  }
  

  What is the best practice for centering an element inside a div?

  In which situation I should use the first code block and the second code block in my code?

  

  QR Code Component

  5

  60

  

  rfcho322• 220

  @rfcho322

  Posted over 1 year ago

  Hi Zubair Adham, congratulations on completing the challenge

  • This block of code is working, it should center vertically and horizontally, you just can't see it because the container where you use this is not taking the full height of its parent.

  display: flex;
  align-items: center;
  justify-content: center;
  

  • This is one is working because you specified a height

  body {
      display: grid;
      place-content: center;
      min-height: 100vh;
  }
  

  • In order for flex to work, so, on your card-container class, do this instead

  body{
  height: 100vh;
  }
  .card-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow