爲什麼我不能使用頂部：50％的元素與自動高度？

Question

我有一個容器div具有自動高度，取決於其內容的高度。裏面有一個盒子，我想垂直居中，同時仍然在dom中有一個位置（因此，相對定位不是絕對的）。出於某種原因，當容器沒有確切的指定高度（min-height不起作用）時，top:50%完全沒有效果。 left:50%呢，top:50px呢，但不是top的百分比。爲什麼是這樣？有解決它的辦法嗎？我不介意使用JavaScript，但它需要隨着頁面窗口大小的變化自動調整，這是很難的，不會觸發成千上萬的事件和/或看起來很滯後。

演示：http://jsfiddle.net/iansan5653/z5p2Lrbj/

Answer 1

不知道我理解你的問題，但仍在努力：

<div style="width:500px; height:auto; border : 1px solid red"> 
    <div style="margin:25% 0; border: 1px solid green"> 
     <!-- Not fixed content --> 
    </div> 
</div> 

Answer 2

你可以親近你需要通過inline-block的元素使用vertical-align什麼。

您需要決定如何計算寬度#box，但calc函數和box-sizing可能會有所幫助。

注意：有一個關於Firefox使用頂部偏移和自動計算高度的錯誤的討論。然而，與此同時，只有這樣，vertical-align才能完成工作。

#container { 
 
    border: 1px solid red; 
 
} 
 

 
#height { 
 
    width: 80px; 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
#box { 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div id="container"> 
 
    <div id="box"> 
 
    Other things here 
 
    </div> 
 
    <div id="height"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed sapien elit. Vestibulum sed sapien congue, suscipit ipsum eu, pretium ante. Donec porttitor, quam quis iaculis interdum, lectus lacus tincidunt diam, efficitur scelerisque massa ante 
 
    vel ex. 
 
    </div> 
 
</div>