相對定位元素的負頂部邊距（垂直對齊）的問題

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減去一半的高度的股利。