当高度为100%并显示内联块时，如何将文本居中顶部/底部？

Question

我有响应式面板。我已经尝试了很多东西来使文本垂直居中，但我无法让它与我使用 twitter-bootstrap 的内容一起使用。

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }
    body {
      margin: 0
    }
    .testing-here {
      font-size: 0;
    }
    .panel-default {
      box-sizing: border-box;
      position: relative;
      width: 50%;
      padding-bottom: 40%;
      overflow: hidden;
      background-color: #446CB3;
      display: inline-block;
    }
    .panel-body {
      color: white;
      width: 100%;
      height: 100%;
      text-align: center;
      position: absolute;
      font-size: 16px;
      display: table-cell;
      vertical-align: middle;
    }

<div class="testing-here">
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example show me full page & resize window
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example font-size kept in between 16 and 50px max
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Basic panel example
    </div>
  </div>
</div>

我研究的问题：

• 身体高度时垂直居中div：100%，无绝对位置
• div 中元素的垂直对齐
• 垂直对齐div 中的文本

Answer 1

尝试使用

Flexbox：这是使用 flexbox 垂直和水平居中的工作示例。

工作示例

*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  margin: 0
}
.testing-here {
  font-size: 0;
}
.panel-default {
  box-sizing: border-box;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  overflow: hidden;
  background-color: #446CB3;
  display: inline-block;
}
.panel-body {
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  font-size: 16px;
  justify-content: center;
    align-items: center;
    display: flex;
}

Answer 2

我也遇到了这个问题，文本将位于底部。将弹性方向更改为列修复了它。