Product preview card - responsive layout using CSS Grid and Flexbox

Community feedback

• Account deleted

  there is a 2 ways to center a div horizontally and vertically

  first one if ever you want to used this approach make sure there is no others sections or div only one parent div inside of the body

  body {
  display : flex;
  align-items: center; (for vertical)
  justify-content: center; (for horizontal)
  
  height: 100vh; (if you don't have this property 
  the vertical won't work only horizontal)
  }
  

  second one this approach is much more accurate to center a div or sections if you have multiple div or section parents inside of the body you can still used this if ever you only have one div or section parent inside of the body

  // add to your class will center hori & verti
  .card  {
  position: absolute;
  top: 50%; (for vertical)
  left: 50%; (for horizontal)
  transform: translate(-50%. -50%);
  }
  

  Marked as helpful

  1

  ---

  

  David•8,000

  @DavidMorgadePosted about 2 years ago

  @okayda Correct answer Jhon! but you can also do it with Grid like this:

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

  Remember to remove all those margins to make it work! this will have the same effect as using flex

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @ChromeUniverse,

  I left feedback on your previous submission as well. The below applies.

  For centering a div or any other container you can either directly on the body or add a another wrapper div set a display: flex; align-items: center; justify-content: center; min-height: 100vh

  the inner container would need a max-width.

  Marked as helpful

  1