相对定位元素的负顶部边距（垂直对齐）的问题

Question

我试图垂直对齐一个容器内的div，高度已定义。我遵循http://www.vertical-align.com/的指南，但我遇到了一些问题。

据该网站，如果我用这个CSS与此代码：可用here

#containingBlock { 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
    border: 1px solid red; 
} 

#containingBlock > div { 
    position: absolute; 
    top: 50%; 
    border: 1px solid green; 

} 

#containingBlock > div > div { 
    position: relative; 
    top: -50%; 
    border: 1px solid orange; 
} 

<div id="containingBlock"> 
    <div> 
     <div> 
     This should be placed in the middle 
     </div> 
    </div> 
</div> 

小提琴，我应该完全在中间取得一个文本。但这不会发生，因为top: -50%不起作用。根据Mozilla devtop属性+％值应该基于父母的身高，在这种情况下，父母的身高与其孩子的身高相同。但“自动包装高度”似乎没有考虑到。如果我为父div指定一个明确的高度（我的意思是，第一个嵌套），一切似乎都可以，但我希望它自动获取其子的高度！这有什么问题？

Answer 1

如果要定位块的高度已知，则可以影响带有负余量（即已知高度的50％）的正确定位。

如果不知道你可以用CSS影响它变换如下

-webkit-transform:translate(0%, -50%); 

这个垂直移动的对象一半它自己的身高......等等

HTML

<div class="containingBlock one"> 
    <div> 
     This should be placed in the middle 
    </div> 
</div> 

CSS

.containingBlock { 
    height: 200px; 
    position: relative; 
    border: 1px solid red; 
} 

.containingBlock > div { 
    position: absolute; 
    top: 50%; 
    border: 1px solid green; 
    -webkit-transform:translate(0%, -50%); 
} 

JSfiddle

Answer 2

这里有一个小提琴：http://jsfiddle.net/dC22r/4/

你有一个高度设置为具有为中心，然后给它top:50%和带负margin减去一半的高度的股利。