javascript - 绝对中心(垂直和水平) "Responsive"它不起作用

Question

我使用的是 Bootstrap 3.3.5 和 demo 30-lazy-load-images，问题是容器不能有固定高度(px)，它必须是“100% 或自动”才能与响应式设计兼容。

检查这个Demo

.swiper-container {
    width: 100%;
    height: 500px; // Only work if star height eg 500px, but need this container responsive 100% or auto.

如果设置高度:100% 或自动，.swiper-container 高度不会初始化为“0”。我们如何解决这个问题？图像必须像延迟加载一样居中

Answer 1

您可以使用 height:50vh; 让滑动器容器显示屏幕高度的一半。或者任何你想设置的高度。
然后这将是响应式的。

.swiper-container {
        width: 100%;
        height: 50vh;
    }

这是 Fiddle 。

有关使用 vh please read this 的更多信息.