使用flexbox在Bootstrap3轮播中垂直居中内容

Question

我试图将一个div中的h3和p元素集中在一起,Bootstrap的.carousel-caption更精确.我给了.carousel-caption固定的​​高度和宽度.我试图将h3和p垂直对齐到父div的中心,如下所示:

           –––––––––––––––––––––––––––––––––––––––––––––––
           |.carousel-caption                            |
           |                                             |
           |                                             |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | |h3                                      |  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           | |p                                       |  |
           | |                                        |  |
           | ––––––––––––––––––––––––––––––––––––––––––  |
           |                                             |
           |                                             |
           |                                             | 
           –––––––––––––––––––––––––––––––––––––––––––––––

我在这个小提琴http://jsfiddle.net/pYjnF/中的代码至少与Chrome有关,但我正在尝试实现桌面C28 + FF22 + S6 IE10的浏览器支持以及iOs 6+ safari和Android 4.0+ Chrome的移动支持.

有什么建议？

Answer 1

得到一个提示,检查这个http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/,事实证明该解决方案实际上是令人尴尬的简单http://jsfiddle.net/pYjnF/1 /

<div class="carousel-caption flex" style="display: flex; align-items: center;">
   <div> <!-- div which content is not aligned -->
      <h3>Headline lorem ipsum dolor</h3>
      <p>Story gnis dis dolor re niet, sed quia se perferciaes eossedit, susam, sam voluptas sandebi stiusam, cuptaturem sequis imi, is etur</p>
   </div>
</div>