在视口中垂直和水平居中滑动滑块

Question

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

但我试图将 Slick 滑块居中，使其位于视口的中心，并且在视口中始终完全可见。

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

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

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

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

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

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

任何指针将不胜感激。

谢谢

Answer 1

由于您提供了站点链接，所以我只做了一些更改，看看现在的样子

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

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