html - 使用react-slick居中幻灯片

Question

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

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

问题来了

图像未居中:

• Flexbox 属性不起作用(红色 div 是一个带有 justify-content: center; 的 Flexbox；
对齐元素:居中；)
• margin:auto 仅适用于水平对齐(如果我使用 Flexbox，则不必设置)
• 我无法去掉上边距(即使在 div 上使用 padding:0px 并在图像上使用 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;
    }

现在正在运行。我刚刚将显示柔性更改为网格，并使地点元素居中