使用react-slick居中幻灯片

Question

我正在尝试实现一个反应流畅的轮播，但我无法将图像垂直居中。这里演示了这个问题。

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

这是问题所在

图像不居中：

• Flexbox 属性不起作用（红色 div 是带有 的 Flexbox justify-content: center; align-items: center;）
• margin:auto仅适用于水平对齐（如果我使用 Flexbox，则不必设置）
• 我无法摆脱上边距（即使在padding:0pxdiv 和margin-top:0px图像上）因此，任何高度为 400px 或更高的图像都会被移动和切断（div 的高度为 400px）

我如何解决它。

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

这现在正在发挥作用。我刚刚将显示柔性更改为网格，并使地点项目居中