将一个 div 中的两个 div 垂直居中答案

【问题标题】：Vertically center two divs in a div将一个 div 中的两个 div 垂直居中
【发布时间】：2014-04-04 21:59:23
【问题描述】：

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

现在我希望三个 div 中的两个（左侧和中间一个）垂直居中。但它不会起作用。我尝试使用 line-height（适用于图片），但 line-height 必须与窗口的高度相同。

这是我的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;
}

我尝试了什么？就像我说的，我用 line-height 试过，但高度是可变的（取决于窗口的大小）。我也尝试了#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);

【问题讨论】：

请提供 JSFiddle 链接，以便更好更快地找到解决方案
你可以试试这个链接phrogz.net/CSS/vertical-align
只需使用javascript（或jQuery）计算窗口高度并进行相应调整。
并且一定要检查名称标识符。在 html 中 - LeftDiv，在 css 中 - leftDiv
是的，我的电脑上就有了。 @remus，我尝试这样做，但是当我设置行高时，它什么也没做。或者您的意思是在这些数字之外使用 margin-top 等？

标签： css html vertical-alignment

【解决方案1】：

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

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

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

【讨论】：