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

【问题标题】：Center div in parent with only min-height, and child may without height & with relative position父级中的中心 div 只有最小高度，子级可能没有高度和相对位置
【发布时间】：2013-07-13 14:10:45
【问题描述】：

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

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

【问题讨论】：

表格展示，可能吗？
你在说这样的事情吗？ jsfiddle.net/tL7t9
不，我想管理这个：vea.re without js。

标签： css centering

【解决方案1】：

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

外部 DIV 需要有 display: table; 和内部 DIV display: 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 上进行简单的搜索会让你得到很多结果。

【讨论】：

是的，我进行了搜索，结果无效，但您的搜索结果无效，因为其他人没有指定 display: table;在父母身上。谢谢。
我过去就注意到了。人们会建议display: table-cell;，但不要注意父元素也应该有display: table;。我将在我的回答中包含此内容以供未来用户使用。