Html 使用react-slick对中滑块

我正在尝试实现一个react-slick旋转木马，但我无法将图像垂直居中。这里演示了这个问题

问题就在这里

图像未居中：

• Flexbox属性不起作用（红色div是一个Flexbox，带有

  justify content:center；
  对齐项目：居中；

  ）

• margin:auto

  仅适用于水平对齐（如果使用flexbox，则不必设置）
• 我无法去掉上边距（即使div上有

  padding:0px

  ，图像上有

  margin top:0px

  ），因此，任何高度为400px或更高的图像都会移位并被切断（div的高度为400px）

我该怎么修呢

   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;
    }

这个正在工作。我刚刚将DisplayFlex更改为grid，并将项目放置在中心位置