html - 使用定义的自动高度和最小高度垂直对齐容器内的内容

Question

我需要在具有下一个属性的 HTML 容器中垂直居中内容:

height: auto;
min-height: 50%;

我尝试了不同的对齐技术但没有成功。例如:

• 表:http://jsfiddle.net/7g461sne/
• 幽灵元素:http://jsfiddle.net/7g461sne/1/

您能否建议如何在此类容器中垂直居中内容？我对纯 HTML/CSS 解决方案很感兴趣。

Answer 1

首先，我将使用表结构。像下面这样更新您的 CSS。

 .main-container {
border: 1px solid;
height: auto;
min-height: 50%; /* important */
display:table;
width:100%;
}

.child-container {
display: inline-table;
height: 100%;
width: 100%;
}

.content {
display: table-cell;
text-align: center;
vertical-align: middle;
}

DEMO