css 在液体高度 div 内垂直对齐？

Question

我的 css 定位噩梦还在继续

<div id="divLeft">LEFT</div>
<div id="divRight">
    <div id="divTop">TOP</div>
    <div id="divCenter"><img id="imgC" src="http://cdn1.iconfinder.com/data/icons/Primo_Icons/PNG/128x128/button_blue_repeat.png"/></div>
    <div id="divBottom">BOTTOM</div>
</div>

CSS

#imgC{
    width:100px;
    vertical-align:middle; // doesn't work?
}  

如何使图像保持垂直居中(注意:父 div 具有液体高度)。

Here is jsfiddle

Answer 1

使用带有负边距的position:absolute，demo here .

#imgC{
    width:100px;
    position:absolute;
    top:50%;
    margin-top:-50px;
}

我还看到您正在使用 calc 来对齐顶部/中心/底部 div，you can also achieve that without calc and still have IE6 compatibility . calc 仅适用于 very recent browsers .