Question

好吧，我得到了这个结构：

    
    #parent{
       max-width: 800px;
       height: auto;
       margin: auto;
    }
    #child{
       position: absolute;
       width: 100%;
       height: 52px;
       display: none;
    }

<div id="parent">
       <div id="child"></div>
    </div>

默认情况下隐藏子div。它通过使用jQuery（.fadeIn）可见。现在问题是，如何仅使用css垂直居中子元素？

Answer 1

我创建了一个原型......但我必须修改你的HTML和CSS，因此它可能不是最好的解决方案：http://jsfiddle.net/TmCwB/

<强> HTML

<div id="outerDiv">
    <div id="parent">
         <div id="child"></div>
    </div>
</div>

<强> CSS

#outerDiv {
    margin: 0 auto;
    width: 200px;
}
#parent{   
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 200px;
    height: 500px;
}
#child{
    width: 100%;
    height: 52px;
    display: inline-block;
    background-color: blue;
}

希望这会有所帮助......

Answer 2

#child{
   position: absolute;
   width: 100%;
   height: 52px;
    /*display:none;*/
   display: block;
   background-color: blue;
   top:50%;
}

只需将 top：50％添加到CSS代码中。

http://jsfiddle.net/nirus/dry2Q/

Answer 3

好的伙计们。谢谢您的回答。 Atrox11的回答是正确的，但我发现还有另外一个问题需要处理。

还有另一个包装div。因为我的所有子div都是绝对的，所以父div的高度为0px。这是实际的错误。在我修复之后，一切都按预期工作。

对不起这个问题。我很感激，如果你不评价，因为每个人都在匆忙时犯了一些错误。

在div中垂直居中div，高度为auto

3 个答案: