用自动高度和最小高度对齐容器内的内容。

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

Answer 2

我已经更新了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;
}

请参阅更新后的JSFIDDLE

Answer 3

固定连接: http://jsfiddle.net/theharsh/k7uwnnfb/

如果CSS3或更低版本不是问题所在，您应该尝试使用IE8技术。元素可以在不考虑高度的情况下垂直中心设置。

HTML：

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

CSS：

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