Flexbox для центрирования текста в середине карусели бутстрапа?

Question

У меня есть сетка из коробки, которые различаются по размеру, и один из коробок имеет самозагрузки карусель: http://www.bootply.com/129530

попробовал кучу комбинаций для получения текста из пунктов в карусели, чтобы быть выровнены по вертикали в средний, наиболее определенно решение стол/стол-клетка ..

Кто-то рекомендовал использовать Flexbox .. Будет действительно оценить решение или пример ..

<div class="box10 border"> 
    <div class="foo"> 
    <div id="foo-carousel" class="carousel slide" data-ride="carousel"> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="bar">...line of text here...</div> 
     </div><!-- /item --> 
     <div class="item"> 
      <div class="bar">...paragraph here...</div> 
     </div><!-- /item --> 
     <div class="item"> 
      <div class="bar">...paragraph there...</div> 
     </div><!-- /item --> 
     </div><!-- /carousel-inner --> 
    </div><!-- /carousel --> 
    </div><!-- /foo --> 
</div><!-- /box10 --> 

Bootstrap карусель CSS

.carousel { 
    position: relative; 
} 
.carousel-inner { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
} 
.carousel-inner > .item { 
    position: relative; 
    display: none; 
    -webkit-transition: .6s ease-in-out left; 
      transition: .6s ease-in-out left; 
} 

Basic Пользовательские CSS

.box10 { 
    height:20%; 
} 
.foo { 
    height: 100%; 
} 
.bar { 
    text-align: center; 
    font-size: 1.4vw; 
    letter-spacing: .03em; 
} 

Answer 1

Просто используйте:

.foo { 
    height: 100%; 
    display: flex; 
    align-items: center; 
} 

Это говорит DIV .foo использовать Flexbox и вертикально выравнивает материал внутри. При необходимости добавить префиксы поставщиков.