I use a flexbox and margin, padding to center the container

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Jorge welcome to the community and congrats finishing the challenge!

  There is an easy way to get your component div in the center of the screen than using paddings and margins! and just with a few lines of CSS.

  First, remove the margin from your div and the padding from your body, then give your body these properties:

  body {
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  

  With this, your component will be fully centered with flexbox instead of margins and paddings, this can help you for future challenge that requires the component on the center of the screen!

  Hope my answer helped you!

  Marked as helpful

  1

  ---

  

  Jorge•110

  @Jtorres1000Posted over 2 years ago

  @DavidMorgade Oh, I understand why that will work, but I didn't think about it 😅 thanks! I usually remove the margins and padding of the body because the majority of webs are full stretch to the sides, but now I know what to do in cases when it's not necessary

  1