Question

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

height: auto;
min-height: 50%;

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

table：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/

如果IE8或更低版本不是问题，你应该尝试使用CSS3技术。元素可以垂直居中设置，无需考虑高度。

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%);
}

垂直对齐容器内的内容，并定义自动高度和最小高度

3 个答案: