如何垂直居中 Bootstrap 轮播标题？

Question

我有一个引导旋转木马，我正在尝试为旋转木马创建一个标题，该标题始终垂直居中并略微位于左侧。我有用于水平定位的 css.. 但是当我尝试垂直定位时，标题不会保持不变。我怎样才能保持 .carousel-caption 始终垂直居中并稍微偏左？

HTML：

    <!-- start JumboCarousel -->
    <div id="jumboCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators hidden-xs">
            <li data-target="#jumboCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#jumboCarousel" data-slide-to="1"></li>
            <li data-target="#jumboCarousel" data-slide-to="2"></li>
            <li data-target="#jumboCarousel" data-slide-to="3"></li>
        </ol><!-- end carousel-indicators -->

        <!-- Wrapper for Slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" id="slide1">
                <a href="#"><img src="http://placehold.it/1920x720&text=Slide+1" alt="Slide 1"></a>
                <div class="carousel-caption">
                    <h1>Check Out this Moose</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <a href="#" class="btn btn-lg btn-primary">Learn More</a>
                </div><!-- end carousel-caption -->
            </div><!-- end slide1 -->
            <div class="item" id="slide2">
                <img src="http://placehold.it/1920x720&text=Slide+2" alt="Slide 2">
                <div class="carousel-caption">
                    <h1>#Slide Title</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <a href="#" class="btn btn-lg btn-primary">Learn More</a>
                </div><!-- end carousel-caption -->
            </div><!-- end slide2 -->
            <div class="item" id="slide3">
                <img src="http://placehold.it/1920x720&text=Slide+3" alt="Slide 3">
                <div class="carousel-caption">
                    <h1>#Slide Title</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <a href="#" class="btn btn-lg btn-primary">Learn More</a>
                </div><!-- end carousel-caption -->
            </div><!-- end slide3 -->
            <div class="item" id="slide4">
                <img src="http://placehold.it/1920x720&text=Slide+4" alt="Slide 4">
                <div class="carousel-caption">
                    <h1>#Slide Title</h1>
                    <p class="lead">This text is super engaging and makes you want to click the button.</p>
                    <button type="button" href="#" class="btn btn-lg btn-primary">Learn More</button>
                </div><!-- end carousel-caption -->
            </div><!-- end slide4 -->
        </div><!-- end carousel-inner -->

    </div><!-- end jumboCarousel -->

CSS：

#jumboCarousel {
    margin-top: 70px;
    min-height: 300px;
    min-width: 100%;
}
#jumboCarousel img {
    min-height: 300px;
    min-width: 100%;
}
#jumboCarousel > .carousel-indicators > li {
    border-radius: 0px;
    min-width: 25px;
    background-color: #9d9d9d;
    border: 1px solid black;
    margin-right: 10px;;
    margin-left: 10px;;
}
#jumboCarousel > .carousel-indicators > .active {
    background-color: orange;
}
#jumboCarousel .carousel-caption {
    color: black;
    right: 58%;
    text-align: center;
    max-width: 500px;
    left: auto;
    top: auto;
}

我所做的任何使标题垂直对齐的操作都以随着屏幕尺寸的减小而导致标题从轮播顶部推出。感谢您的帮助。

引导层：http://www.bootply.com/aWK6oVRWVo

Answer 1

在标题或文本中提供内联样式 顶部：30vh；

Answer 2

您可以使用 CSS 属性 transform 的 translateY 函数来垂直对齐元素。 Browser support 相当不错，包括IE9。 因此，只需将以下内容添加到您的 .carousel-caption CSS 中即可。

top: 50%;
transform: translateY(-50%);

现在您需要删除由默认引导 CSS 添加的额外 bottom 空间。将以下内容也添加到您的 .carousel-caption CSS 中。

bottom: initial;

最后但并非最不重要的一点是，为父元素（在本例中为 .item）提供以下 CSS 以防止将元素放置在半像素上时出现模糊。

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

Working Example