title: Vertically center Bootstrap Carousel image captions
body: <p>Is it possible to center the captions in Bootstrap 3.0 vertically?</p>
  
  <p>Here's a screenshot of how it looks now <a href="http://i.imgur.com/OJKaXwv.png" rel="nofollow">http://i.imgur.com/OJKaXwv.png</a></p>
  
  <p>So that the captions, all the text, is in the middle of the picture? Here's my HTML code:</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;!-- Indicators --&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="images/slide01.jpg" alt="First slide"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Welcome&lt;/h1&gt;
            &lt;p&gt;Here you'll see a great text!&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="images/slide02.jpg" alt="Second slide"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;Great Caption&lt;/h1&gt;
            &lt;p&gt;So, this will be a great text as well.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="images/slide03.jpg" alt="Third slide"&gt;
        &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h1&gt;One more&lt;/h1&gt;
            &lt;p&gt;Once again you'll see a great text here, seriously it'll be awesome!&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS file is pretty stock (changed nothing):</p>
  
  <pre><code>.carousel {
    margin-bottom: 60px;
   /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    margin-top: -20px;
  }
  
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    z-index: 10;
  }
  
  /* Declare heights because of positioning of img element */
  .carousel .item {
    min-height: 200px;
    background-color: #777;
  }
  .carousel-inner &gt; .item &gt; img {
    width: 100%;
    display: block;
    max-width: 100%;
  }
  </code></pre>
  
  <p>I just can't get this to work, already tried: <code>http://stackoverflow.com/questions/16887484/positioning-and-styling-of-twitter-bootstrap-carousel-image-captions/19623418#19623418 , http://stackoverflow.com/questions/19070256/center-content-vertically-in-bootstrap3-carousel-with-flexbox , http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ , http://jsfiddle.net/pYjnF/1/</code></p>
  
  <p>None of them worked they simply didn't center the captions.</p>
  
  <p>I'm now working a day just on centering the text and somehow have the impression that it's embarrassingly easy but I just can't figure out how to do it.</p>