Simple page with CSS and HTML

Community feedback

• 

  Kamlesh Rajesh Yadav•5,060

  @Kamlesh0007Posted over 1 year ago

  To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚. For this demonstration we use css Grid to center the component. body { min-height: 100vh; display: grid; place-items: center; }

  Marked as helpful

  0
• 

  P

  Azzumar•340

  @AzzumarithmPosted over 1 year ago

  Good job on completing your first project but I can't view your code.

  Code Improvement:

  I assume that you do everything within the body element(if not then target the suitable parent element). If you want to center it horizontally, vertically then you can do it like this :

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

  the default flex-direction is row(but you can change it to column but that's unnecessary for now) so in this case justify-content is to center horizontally and align-items is to center vertically (if you change to flex-direction: column, justify-content will center vertically and align-items will center horizontally)

  min-height : 100vh - ensures that the body element is at least 100vh (viewport height) tall, but will expand vertically as needed based on its content.

  Good luck on coding your journey

  Marked as helpful

  0

  ---

  

  cassiotsantos•10

  @cassiotsantosPosted over 1 year ago

  @Azzumarithm Thank you very much! I will review the code with your suggestion, it will be much more optimized.

  0