在高度自动的 div 中垂直居中 div答案

【问题标题】：Vertically center div in a div with height auto在高度自动的 div 中垂直居中 div
【发布时间】：2013-06-24 00:00:11
【问题描述】：

嗯，我得到了这个结构：

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

【问题讨论】：

在这种情况下，父div会有子div的高度，所以居中没有太大意义？
为什么在使用fadeIn() 和jQuery 时只使用CSS？所以你已经依赖 JavaScript
但是，很好的链接：blog.themeforest.net/tutorials/vertical-centering-with-css

标签： vertical-alignment centering css

【解决方案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;
}

希望这会有所帮助...

【讨论】：

【解决方案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/

【讨论】：

无法正常工作，因为即使子 div 的高度为 300 像素，它也会从顶部定位 50%...所以位置是绝对的，而不是居中的。
如果您的孩子的身高已知，这仍然可以通过将margin-top 设置为孩子身高的负数来实现。

【解决方案3】：

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

还有另一个包装 div。由于我所有的子 div 都是绝对定位的，因此父 div 的高度为 0px。这是真正的错误。在我修复它之后，一切都按预期工作。

对不起这个问题。如果您不评价它，我将不胜感激，因为每个人在匆忙时都会犯一些错误。

【讨论】：