How to vertically center a Bootstrap carousel-caption?

Question

I have a bootstrap carousel and I am trying to create a caption for the carousel that is always vertically centered and positioned slightly to the left. I have the css for the horizontal positioning.. but when I try to position vertically, the caption doesn't stay put. How can i keep the .carousel-caption always centered vertically and slightly to the left?

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

anything I do to give the caption a vertical alignment has ended up with the caption getting pushed out of the top of the carousel as the screen-size decreases.. Thanks for the help.

Bootply: http://www.bootply.com/aWK6oVRWVo

Answer 1

You can use the translateY function of the CSS property transform to vertically align elements. Browser support is quite decent, including IE9. Therefore just add the following to your .carousel-caption CSS.

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

Now you need to get rid of the extra bottom space, added by the default bootstrap CSS. Add the following as well to your .carousel-caption CSS.

bottom: initial; 

And last but not least give the parent element, in this case .item, the following CSS to prevent blurry elements when it's placed on half a pixel.

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

Working Example