在高度为auto的div中垂直居中一个div

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垂直居中子元素？

- jurihandl

---

在这种情况下，父级 div 将具有子级 div 的高度，因此居中对齐没有太多意义？ - sinisake

为什么在使用jQuery的fadeIn()时只使用CSS是不够的呢？因此，您已经依赖于JavaScript。 - Atrox111

然而，很棒的链接：http://blog.themeforest.net/tutorials/vertical-centering-with-css/ - sinisake

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

希望这能帮到你...

- Atrox111

Answer 2

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

只需在您的CSS代码中添加 top:50%。

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

- NiRUS

---

无法正常工作，因为子div即使高度为300px，也会从顶部的50%位置定位...因此位置是绝对的而不是居中的。 - Atrox111

如果已知您孩子的身高，可以通过将 margin-top 设置为负孩子身高的一半来实现。 - Warpling

Answer 3

好的大家。谢谢你们的回答。Atrox11的答案是正确的，但我发现还有另一个问题需要解决。

还有另一个包装的div。由于所有子div都被绝对定位，父div的高度为0px。这就是实际的问题所在。在我解决这个问题之后，一切都按预期工作了。

对不起问这个问题。如果您不要将其评为负面，因为在匆忙时每个人都会犯错误，我会很感激。

- jurihandl