垂直对齐：中间；引导轮播中的div？

Question

有一个大小不一的盒子网格，其中一个盒子有一个引导轮播：http://www.bootply.com/129530

尝试了一系列组合，以使轮播中项目的文本在中间垂直对齐。

对于最有意义的技术，文本从页面上消失了！？

<div class="box10 border">
  <div class="questions">
    <div id="questions-carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="middleContainer">
            <div class="middle">
              <div class="question">...text here...</div>
            </div>
          </div>
          </div><!-- /item -->
        <div class="item">
          <div class="middleContainer">
            <div class="middle">
              <div class="question">...text here...</div>
            </div>
          </div>
        </div><!-- /item -->
      </div><!-- /carousel-inner -->
    </div><!-- /carousel -->
  </div><!-- /questions -->
</div><!-- /box10 -->

这是 css，这是使用相对 + 绝对表格 100% + 表格单元 50% 垂直对齐技术：

.box10 {
  height:20%;
  overflow-x: auto;
  position: relative;
}
.questions {
  margin-left: 4%;
  margin-right: 4%;
  position: relative;
  height: 100%;
}
.middleContainer {
  position: relative;
}
.middle {
  position: absolute;
  display: table;
  height: 100%;
  width: 100%;
}
.question {
  height: 50%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 1.4vw;
  letter-spacing: .03em;
  font-style: italic;
}

Answer 1

如果没有以下任何一项，您将无法垂直对齐其容器中的文本：

• 使用弹性盒

• 固定文本容器的高度

• 将文本限制为仅一行

这些“解决方案”中的每一个都有其缺点，因此您必须做出妥协。 例如，使用 Flexbox，您会失去一些浏览器支持，如下所示：http://caniuse.com/flexbox

Answer 2

或许您可以扩展 this solution 以满足您的需求。

.questions:after {
    content: "";
    height: inherit;
    display: inline-block;
    vertical-align: middle;
}
.carousel {
    display: inline-block;
    vertical-align: middle;
}