为什么我不能使用顶部：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>