title: How to vertically center a Bootstrap carousel-caption?
body: <p>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?</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!-- start JumboCarousel --&gt;
      &lt;div id="jumboCarousel" class="carousel slide" data-ride="carousel"&gt;
  
          &lt;!-- Indicators --&gt;
          &lt;ol class="carousel-indicators hidden-xs"&gt;
              &lt;li data-target="#jumboCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#jumboCarousel" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#jumboCarousel" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;li data-target="#jumboCarousel" data-slide-to="3"&gt;&lt;/li&gt;
          &lt;/ol&gt;&lt;!-- end carousel-indicators --&gt;
  
          &lt;!-- Wrapper for Slides --&gt;
          &lt;div class="carousel-inner" role="listbox"&gt;
              &lt;div class="item active" id="slide1"&gt;
                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/1920x720&amp;text=Slide+1" alt="Slide 1"&gt;&lt;/a&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;h1&gt;Check Out this Moose&lt;/h1&gt;
                      &lt;p class="lead"&gt;This text is super engaging and makes you want to click the button.&lt;/p&gt;
                      &lt;a href="#" class="btn btn-lg btn-primary"&gt;Learn More&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- end carousel-caption --&gt;
              &lt;/div&gt;&lt;!-- end slide1 --&gt;
              &lt;div class="item" id="slide2"&gt;
                  &lt;img src="http://placehold.it/1920x720&amp;text=Slide+2" alt="Slide 2"&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;h1&gt;#Slide Title&lt;/h1&gt;
                      &lt;p class="lead"&gt;This text is super engaging and makes you want to click the button.&lt;/p&gt;
                      &lt;a href="#" class="btn btn-lg btn-primary"&gt;Learn More&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- end carousel-caption --&gt;
              &lt;/div&gt;&lt;!-- end slide2 --&gt;
              &lt;div class="item" id="slide3"&gt;
                  &lt;img src="http://placehold.it/1920x720&amp;text=Slide+3" alt="Slide 3"&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;h1&gt;#Slide Title&lt;/h1&gt;
                      &lt;p class="lead"&gt;This text is super engaging and makes you want to click the button.&lt;/p&gt;
                      &lt;a href="#" class="btn btn-lg btn-primary"&gt;Learn More&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- end carousel-caption --&gt;
              &lt;/div&gt;&lt;!-- end slide3 --&gt;
              &lt;div class="item" id="slide4"&gt;
                  &lt;img src="http://placehold.it/1920x720&amp;text=Slide+4" alt="Slide 4"&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;h1&gt;#Slide Title&lt;/h1&gt;
                      &lt;p class="lead"&gt;This text is super engaging and makes you want to click the button.&lt;/p&gt;
                      &lt;button type="button" href="#" class="btn btn-lg btn-primary"&gt;Learn More&lt;/button&gt;
                  &lt;/div&gt;&lt;!-- end carousel-caption --&gt;
              &lt;/div&gt;&lt;!-- end slide4 --&gt;
          &lt;/div&gt;&lt;!-- end carousel-inner --&gt;
  
      &lt;/div&gt;&lt;!-- end jumboCarousel --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#jumboCarousel {
      margin-top: 70px;
      min-height: 300px;
      min-width: 100%;
  }
  #jumboCarousel img {
      min-height: 300px;
      min-width: 100%;
  }
  #jumboCarousel &gt; .carousel-indicators &gt; li {
      border-radius: 0px;
      min-width: 25px;
      background-color: #9d9d9d;
      border: 1px solid black;
      margin-right: 10px;;
      margin-left: 10px;;
  }
  #jumboCarousel &gt; .carousel-indicators &gt; .active {
      background-color: orange;
  }
  #jumboCarousel .carousel-caption {
      color: black;
      right: 58%;
      text-align: center;
      max-width: 500px;
      left: auto;
      top: auto;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Bootply: <a href="http://www.bootply.com/aWK6oVRWVo" rel="noreferrer">http://www.bootply.com/aWK6oVRWVo</a></p>