centering slides with react-slick

Question

I'm trying to implement a react-slick carousel but I'm having trouble getting the image to vertically center. This problem is demonstrated here.

https://codesandbox.io/s/react-slick-playground-o7dhn

Here is the problems

Images are not centered:

• Flexbox property does not work (the red div is a flexbox with justify-content: center; align-items: center;)
• margin:auto only works for horizontal alignment (which I shouldn't have to set if I'm using flexbox)
• I can not get rid of the top margin (even with padding:0px on the div and margin-top:0px on the image) As a consequence, any image with the height of 400px or more gets shifted and cut off (div has the height of 400px)

How do I fix it.

Answer 1

   img {
      margin: auto;
      height: 200px;
      width: 200px;
    }
    
    .slick-slide > div {
      display: grid;
      place-items: center;
      width: 80%;
      margin-top: 50px;
      margin: auto;
      height: 500px;
      padding: 0px;
      background: red;
    }

This is working right now. I just changed display flex to grid, and made place-items centered