中心div在父级只有最小高度，孩子可以没有高度&相对位置 [英] Center div in parent with only min-height, and child may without height & with relative position

问题描述

所以我有一个div是min-height 100％; （屏幕的100％或更多）。孩子保存内容并需要垂直居中，但它可能会将父级扩展到其大小的100％以上。

so I have a div which is min-height 100%; (100% of the screen or more). The child holds the content and needs to be centered vertically, but it might extend the parent to more than 100% of its size. This child is variable in height.

所以有一种方法只有css（3）来做这个？

So is there a way with only css(3) to do this?

推荐答案

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

外部DIV需要具有 display：table; 和内部DIV ：table-cell; 以及 vertical-align：middle; 。现在您将模仿 td 的默认显示。

The outer DIV will need to have display: table; and the inner DIV display: table-cell; along with vertical-align: middle;. Now you will be mimicing the default display of a td.

CSS p>

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上进行简单搜索即可获得结果。

This question has been asked often. A simple search here on SO or Google will get you plenting of results.

• 垂直对齐Divs


• 使用CSS 3垂直对齐

• Vertically Aligning Divs
• Align vertically using CSS 3

这篇关于中心div在父级只有最小高度，孩子可以没有高度&相对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！