如果元素的父元素具有响应高度，我如何垂直居中？答案

【问题标题】：How can I vertically center an element if it's parent has responsive height?如果元素的父元素具有响应高度，我如何垂直居中？
【发布时间】：2016-03-17 17:26:12
【问题描述】：

我有一个元素至少要占据屏幕的下半部分，但仍允许文本使其变大。当然，我会使用 min-height，但在将文本垂直居中时，这似乎失败了。

我不能使用position:absolute，因为它需要保留在 DOM 中。

这是一个模型：

* {
  margin: 0;
  padding: 0;
}
body {
  height: 1000px;
}
.img {
  height: 50%;
  width: 100%;
  background: lightblue;
}
.text {
  min-height: 20%;
  background: coral;
  text-align: center;
  margin: 0 15%;
}
.centered {
  /* I need to center this within it's parent */
}

<body>
  <div class="img"></div>
  <div class="text">
    <div class="centered">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris  tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
    </div>
  </div>
</body>

【问题讨论】：

您是否阅读了您发布的第一个相关问题？ stackoverflow.com/questions/79461/…
是的，我做到了。解决方案要么需要固定高度，要么需要position:absolute（我有文字，所以这不起作用）。

标签： html css responsive-design vertical-alignment

【解决方案1】：

* {
  margin: 0;
  padding: 0;
}
body {
  height: 1000px;
}
.img {
  height: 50%;
  width: 100%;
  background: lightblue;
}
.text {
  min-height: 20%;
  background: coral;
  text-align: center;
  margin: 0 15%;
  display: table;
}
.centered {
  /* I need to center this within it's parent */
  display: table-cell;
vertical-align: middle;
}

<div class="img"></div>
  <div class="text">
<div class="centered">
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris  tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
</div>
  </div>

【讨论】：

我曾希望避免使用表格，但似乎这是唯一的方法。哦，好吧！

【解决方案2】：

我可以使用display: flex 和一些填充来做到这一点。见fiddle。

【讨论】：

我可能发布得太快了，因为仅在顶部和底部填充也可以解决问题。
我不喜欢使用 flex。希望我能！
当最小高度生效时，顶部和底部的填充失败。
我没有看到它失败的地方。您能否附上屏幕截图并让我知道它在什么浏览器宽度下失败？
当元素调整为文本大小时，它看起来很好（大于 20% 时）。但是，当文本有多余空间时，只使用顶部填充，其余元素只是一个大空间。我有截图，如果你还需要的话。