Javascript 使用react-slick对中滑块

我希望把一个反应光滑的旋转木马付诸实施，但我有问题使图像垂直居中。这个问题就建立在这里

图像没有聚焦

Flexbox属性不再工作（crimson div是一个包含justify content:center的Flexbox； 对齐小工具：中间；） 边距：汽车最简单的工程水平对齐（我应该不需要设置，如果我使用flexbox） 我无法删除上边距（尽管div处的填充：0px，图片处的边距顶部：0px），因此，任何峰值为400px或额外值的照片都会移位并缩小（div的高度为400px）

沙盒中的代码：

import React from "react";
import ReactDOM from "react-dom";
import Slider from "react-slick";
import "./index.css";

class ReactSlickDemo extends React.Component {
  render() {
    var settings = {
      dots: false,
      arrows: false
    };
    return (
      <div className="container">
        <Slider {...settings}>
          <div>
            <img src="http://placekitten.com/g/400/400" />
          </div>
          <div>
            <img src="http://placekitten.com/g/400/200" />
          </div>
          <div>
            <img src="http://placekitten.com/g/200/200" />
          </div>
          <div>
            <img src="http://placekitten.com/g/400/200" />
          </div>
        </Slider>
      </div>
    );
  }
}

ReactDOM.render(<ReactSlickDemo />, document.getElementById("container"));

从“React”导入React；
从“react dom”导入react dom；
从“react slick”导入滑块；
导入“/index.css”；
类ReactSlickDemo扩展了React.Component{
render（）{
变量设置={
点：错，
箭头：假
};
返回(
);
}
}
render（，document.getElementById（“容器”）；

图像以您的代码为中心，以最小的重复性示例在问题中包含代码。编码沙盒对于我们帮助您来说绝对是非常好的，我们非常感谢您，但是如果您以后编辑沙盒，或者该站点消失，人们将无法看到最初的问题是什么。我为您添加了它，但请务必在将来包含它。：）