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

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

我相信这是您要在这里实现的目标