在视口中垂直和水平居中 Slick Slider

Question

我已经阅读了关于 CSS 居中和 JS 居中的帖子。

但是我正在尝试将 Slick 滑块居中，以便它位于视口的中央，并且在视口中始终完全可见。

图片都是正方形的，我想得到它，所以滑块始终位于中间，并具有固定的最小页边距。

因此，如果页面是横向的，它将水平居中并且滑块会收缩到合适的高度。

如果页面是纵向的，它会水平居中并且滑块会缩小到合适的宽度。

我知道第二个条件为真，但我无法让它工作，然后确保横向滑块不会展开。

如果我使用固定内容执行此操作会很容易，但是使用灵活的滑块，当我尝试其他完全集中在视口内的方法时，它会中断。

查看示例：http://www.edwardmccann.studio/2018/index.php/

任何指点将不胜感激。

谢谢

Answer 1

由于您提供了您的网站 link，所以我只做了一些改动，看看现在的样子

.slider img {
    max-height: 80vh;
    width: auto;
    margin: 0 auto;
}

.slider{
    max-height: 80vh !important;
    width: 50vw;
    overflow: hidden;
}
.slider .slick-slide{
    line-height: 80vh;
}

我相信这就是你想要在这里实现的目标

在视口中垂直和水平居中 Slick Slider

Vertically & Vorizontally center Slick Slider in Viewport

css

centering

slick.js