如何在网页上居中显示幻灯片（responsiveslides.js）？答案

【问题标题】：How to center a slideshow (responsiveslides.js) on a webpage?如何在网页上居中显示幻灯片（responsiveslides.js）？
【发布时间】：2017-01-14 01:18:26
【问题描述】：

我使用 responsiveslides.js (http://responsiveslides.com/) 构建了一个幻灯片。幻灯片现在占据了我的整个网页。我目前正在尝试使此幻灯片居中。

我试图用this question 解决这个问题，但我只得到了凯提供的答案的一半结果...（内容水平居中，而不是垂直居中 + 下一个/上一个按钮不在我的内容上没有了。。

任何人有一些技巧可以帮助我吗？如果需要，我可以发布我的代码。

【问题讨论】：

贴出你试过的html和css

标签： javascript html css

【解决方案1】：

弹性盒！！

我对您的滑块一无所知，但这会将单个目标 div 放入页面中间 - 几乎。它水平居中，但将目标 div 的顶部垂直放在中间。要解决此问题，请将高度从 100vh 调整为更小（即减去目标 div 大小的一半）。

    body {
        height:100vh;
        display:-webkit-flex;
        display:flex;
        -webkit-justify-content:center;
        justify-content:center;
        -webkit-align-items:center;
        align-items:center;
        flex-direction:row;
        -webkit-flex-direction: row;
        }

更新：

您可以添加一个容器 div。例如，

<body><div class='container'>your slideshow</div></body>

然后使用：

.container { height:100vh; width:100vw; display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; flex-direction:row; -webkit-flex-direction: row; }

然后你可以向下调整宽度，直到效果很好。

【讨论】：

非常感谢您的评论。如果我插入这个；垂直情况更好（居中）；但横向我的幻灯片位于页面的左侧。
在我的屏幕上还生成了一个滚动条，很奇怪，因为幻灯片并没有那么大。