html - 响应式垂直居中轮播项目

Question

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

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

Answer 1

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

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

我希望这可以帮助你。享受 ：）

Answer 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 
    }

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