css - 在视口(viewport)中垂直和水平居中 Slick Slider

Question

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

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

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

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

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

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

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

请参阅此处示例: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;
}

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