绝对中心（垂直和水平）＆＃34;响应＆＃34;这是行不通的

Question

我使用Bootstrap 3.3.5和演示30-lazy-load-images，问题是容器不能有固定高度（px），它必须是＆＃34; 100％或auto＆ ＃34;因为它与响应式设计兼容。

选中此Demo

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

}

如果设置高度：100％或auto，.swiper-container height不初始化＆＃34; 0＆＃34;。我们怎么解决这个问题？图像必须像延迟加载一样居中

Answer 1

您可以使用高度：50vh; 让狙击容器显示屏幕高度的一半。或者你想要设置这个高度的任何东西。
然后这将是响应。

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

以下是 Fiddle 。

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