css - 在一个div中垂直居中两个div

Question

我尝试了很多解决方案，但没有任何效果。我有一个高度可变的 div，它并排包含三个其他 div。效果很好。

现在我希望三个 div 中的两个(左侧和中间一个)垂直居中。但这是行不通的。我尝试使用行高(适用于图片)，但行高必须与窗口的高度相同。

这是我的 html:

<div id="outerDiv">
    <div id="LeftDiv">
        <img id="imgArrow" src="images/arrow.png">
    </div>
    <div id="middleDiv">
         <div id="buttonDiv" class="linkButton"></div>
    </div>
    <div id="rightDiv">
         <img id="imgIpad" src="images/ipad.png">
    </div>
</div>

还有我的 CSS:

#outerDiv{
    overflow:hidden;
    width:100%;
    border: 0px solid;
    background-color:#e4ecfe;
}
#middleDiv{
    width: 35%;
    float: left;
    border: 1px solid;
}
#leftDiv{
    margin: auto;
    width: 35%;
    float: left;
    left: -10%;
    border: 1px solid;
    text-align: center;
}
#rightDiv{
    width: 28%;
    text-align: right;
    float: left;
}
#buttonDiv{
    text-align: center;
    border:1px solid; 
    border-radius:5px; 
    color:white;    
    line-height: 140%;
    font-family: Arial;
}

我尝试了什么？就像我说的，我用行高试过，但高度是可变的(取决于窗口的大小)。我也用 #outerDiv:before 尝试了一些东西，但它也没有用。

有什么建议吗？

编辑:

JSFiddle:http://jsfiddle.net/5cT2T/

解决方案:

获取每个 jQuery 的高度并使用以下代码设置 margin-top:

var height = $(window).height(),
    middleHeight = $("#middleDiv").height(),
    leftHeight = $("#leftDiv").height();
$('#leftDiv').css('margin-top', (height - leftHeight) / 2);
$('#middleDiv').css('margin-top', (height - middleHeight) / 2);

Answer 1

如果你想将一个 div 在另一个 div 中垂直居中，最常见的技术是将内部 div “position:absolute”放在外部 div 中，将位置设置为“top:50%”。

这样做，将使内部 div 的上边界达到外部 div 高度的 50%，因此只需在内部添加一个负的“margin-top”。负边距的值等于其高度的一半。

如果我正确地理解了您想要什么...只需将您的 LeftDiv 和 MiddleDiv 包装在一个容器中，然后在容器和 LeftDiv 之间应用建议的技术! :-)