Blog Preview Card

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 7 months ago

  Hello, @3kori!

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  1

  ---

  

  3kori•80

  @3koriPosted 7 months ago

  Hello, @danielmrz-dev. Thank you for the suggestion. I will make the corrections and apply this to all my projects.

  0

  

  3kori•80

  @3koriPosted 7 months ago

  Hi @danielmrz-dev,

  Just a follow-up question.

  Why wouldn't I use the grid property for the body like the one below to center the container?

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

  And why is min-height: 100vh; important in centering the container?

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 7 months ago

  @3kori

  Yes. That works with grid too.

  min-height: 100vh is important because the align-items property centers the element based on the user's screen viewport height. That's why you need that.

  0

  

  3kori•80

  @3koriPosted 7 months ago

  @danielmrz-dev

  Understood! Thank you again.

  0