Html FrasBox用于引导引导转盘中间的文本？

我有一个大小不同的盒子网格，其中一个盒子有一个引导转盘：

尝试了一组组合，以使转盘中的项目文本在中间垂直对齐，特别是表/表格单元解决方案。

有人刚刚建议使用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 -->

基本自定义CSS

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

只需使用：

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

这告诉.foo div使用flexbox并垂直对齐内部内容。 如果需要，添加供应商前缀

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