Html 将容器内的内容与定义的“自动高度”和“最小高度”垂直对齐

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

height: auto;
min-height: 50%;

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

• 表:
• 鬼元素：

---

您能建议如何在这样的容器中垂直居中放置内容吗？我对纯HTML/CSS解决方案感兴趣。

首先我要介绍表结构。更新你的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;
}

---

我已经更新了css：

html, body {
    height: 100%;
}

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

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

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

请查看更新的

小提琴链接：

如果IE8或更低版本不是问题所在，您应该尝试CSS3技术。 元素可以设置为垂直居中，而不考虑高度

HTML:

<div class="box">
    <div class="vcenter">
        Yo! This is Centered !
    </div>
</div>

---

答案就在这里，你的问题是：你的确切意思是什么？请注意我的问题的具体内容-容器具有“自动”高度以及定义的最小高度。您在“框”元素上使用固定高度。在我的例子中，它有高度“自动”和最小高度。您的解决方案无效：。子元素是否具有固定高度？否，子元素没有固定高度。很遗憾，此解决方案在Firefox中不起作用-忽略最小高度。它与此问题相关：。您可以使用jQuery查询最小高度。看，是的，当然。我对纯HTML/CSS解决方案感兴趣（更新了问题）。非常感谢。不幸的是，此解决方案在Firefox中不起作用-忽略最小高度。它与这个问题相关：bugzilla.mozilla.org/show_bug.cgi？id=307866。

.box{
   height:200px;
   background:tomato;
   color:#fff;
   width:200px;
}
.vcenter{
    position: relative;
    top:50%;
    background:purple;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}