css - 父级中的中心 div 只有最小高度，子级可能没有高度和相对位置

Question

所以我有一个最小高度为 100% 的 div；（屏幕的 100% 或更多）。子级持有内容并且需要垂直居中，但它可能会将父级扩展到其大小的 100% 以上。这个孩子的身高是可变的。

那么有没有办法只用 css(3) 来做到这一点？

score 1 · Accepted Answer

使用display: table;和display: table-cell;属性。

外部 DIV 将需要具有display: table;，内部 DIVdisplay: table-cell;将需要vertical-align: middle;。现在您将模仿td.

CSS

.parent {
  min-height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; 
}

HTML

<div class="parent">
     <div class="child">child</div>
</div>

这个问题经常被问到。在 SO 或 Google 上进行简单搜索将为您提供大量结果。

1 回答 1