Vertically center Bootstrap Carousel image captions [duplicate]

Question

Is it possible to center the captions in Bootstrap 3.0 vertically?

Here's a screenshot of how it looks now https://i.sstatic.net/dFfB4.jpg

So that the captions, all the text, is in the middle of the picture? Here's my HTML code:

<div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/slide01.jpg" alt="First slide">
        <div class="carousel-caption">
          <h1>Welcome</h1>
          <p>Here you'll see a great text!</p>
        </div>
    </div>
    <div class="item">
      <img src="images/slide02.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Great Caption</h1>
          <p>So, this will be a great text as well.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="images/slide03.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more</h1>
          <p>Once again you'll see a great text here, seriously it'll be awesome!</p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

My CSS file is pretty stock (changed nothing):

.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 > .item > img {
  width: 100%;
  display: block;
  max-width: 100%;
}

I just can't get this to work, already tried: 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/

None of them worked they simply didn't center the captions.

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.

Answer 1

try adding this code in your css:

.carousel-caption {
  margin-bottom: 50px;
}

change that px value according to your image size.