Question

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

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

以下是情况的模型：

＆＃13;

* {
  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 */
}

＆＃13;

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

＆＃13;

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。

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

2 个答案: