如何在网页上居中幻灯片展示（responsiveslides.js）？
如何在网页上居中幻灯片展示（responsiveslides.js）？
我使用responsiveslides.js（http://responsiveslides.com/）构建了一个幻灯片。现在幻灯片占据了整个网页。我正在尝试将这个幻灯片居中显示。
我尝试使用这个问题来解决，但是我只得到了一些不完全的结果，这是由Kay提供的答案造成的...（内容水平居中，垂直居中不起作用+下一个/上一个按钮不在我的内容上了...）
有人有什么窍门可以帮助我吗？如果需要，我可以贴出我的代码。
如何将幻灯片放在网页上居中显示？
问题的原因：
- 作者希望将幻灯片放在网页的中心位置，但原始的CSS样式无法实现这一效果。
解决方法：
- 使用Flexbox布局。
- 将CSS样式应用于
标签，以使其居中显示。- 调整容器的高度和宽度，以适应幻灯片的大小。
- 将幻灯片放置在一个容器
中，然后将容器居中显示。
完整的CSS代码如下：
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;
}
.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;
}
作者通过使用Flexbox布局解决了幻灯片在网页上的居中显示问题。首先将CSS样式应用于
标签，然后将幻灯片放置在一个容器中，最后通过调整容器的大小来实现幻灯片的居中显示。
感谢评论，通过以上方法，作者成功实现了垂直居中显示幻灯片，但水平居中显示的效果仍然不理想。同时，在作者的屏幕上还出现了滚动条，这是因为幻灯片的大小超出了页面的大小。
以上是解决如何将幻灯片居中显示在网页上的问题的方法和原因。通过使用Flexbox布局和调整容器大小，作者成功实现了幻灯片在网页上的居中显示。