响应式垂直居中轮播项目答案

【问题标题】：Vertically center carousel items in responsive响应式垂直居中轮播项目
【发布时间】：2016-09-01 17:29:19
【问题描述】：

我在 responsive 中有一个带有可变高度的项目的轮播，我想在 .carousel-inner 容器中将它们垂直居中。我确实这样做了（使用 flex、top 和 transform 等）......但它们只有在它们激活时完成动画时才会居中，所以它们首先对齐顶部，然后向下对齐，看起来像是在跳跃。

我认为这与轮播的 Bootstrap 动画有关，但我还没有弄清楚。该页面是https://zuckermanlaw.swapps.io，轮播位于我们的服务部分。我会很感激任何帮助。谢谢。

【问题讨论】：

标签： html css twitter-bootstrap responsive bootstrap-carousel

【解决方案1】：

只需将与 carousel-inner 类相同的高度添加到下面提到的类中，尽管它会稍微拉伸图像但可以解决您的问题。

section.third-section #carousel-our-services .carousel-inner .item .carousel-caption {
        display: flex;
        height: 365px;    
    }

我希望这对你有帮助。享受:)

【讨论】：

那是桌面的高度，但对于响应等于高度的响应仍然很有效。谢谢！

【解决方案2】：

我玩弄了这个并想出了这个。

    @media (-webkit-transform-3d), not all
    .carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translate(0,-50%); // IE9
transform: translate3d(0,-50%,0); // Modern Browsers 
    }

我替换了该选择器的所有声明。它改变了动画风格，但它确实垂直对齐。就个人而言，我认为这看起来很酷，但你可能不会。我认为它仍然值得向你展示。这对你来说可能是一个好的开始。我在浏览器检查器中进行了此操作，这是我所做的唯一更改。

【讨论】：

虽然应该注意这真的很重，可能会使图像质量下降。 -- 另一方面，这绝对是我所知道的最有效和最简单的解决方法。
感谢您的建议，BabyD！
我喜欢它，但是在工作中不能接受那个动画。无论如何，感谢您的帮助！