3

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

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

4

3 回答 3

4

我已经创建了一个原型......但我不得不修改你的 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;
}

希望这可以帮助...

于 2013-06-26T17:59:48.610 回答
1 
#child{
   position: absolute;
   width: 100%;
   height: 52px;
    /*display:none;*/
   display: block;
   background-color: blue;
   top:50%;
}

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

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

于 2013-06-26T18:14:14.687 回答
0

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

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

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

于 2013-06-26T19:07:39.547 回答