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

【问题标题】：Center content vertically in Bootstrap3 carousel with flexbox使用 flexbox 在 Bootstrap3 轮播中垂直居中内容
【发布时间】：2013-10-04 21:38:33
【问题描述】：

我试图将 h3 和 p 元素放在 div 中，更准确地说是 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 的移动支持。

有什么建议吗？

【问题讨论】：

标签： twitter-bootstrap flexbox

【解决方案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>

【讨论】：

你拯救了我的一天。为此干杯！
很好的解决方案。但是，您的代码在 CSS 部分需要 carousel-caption 的高度值。在正常情况下，此高度值与背景图像的高度值相同。检查此代码。 jsfiddle.net/n86hLyLu/1