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

Question

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

我不能使用 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>

Answer 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>

Answer 2

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

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

How can I vertically center an element if it's parent has responsive height?

html

css

vertical-alignment

responsive-design