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

您可以在内联块元素上使用vertical-align来接近所需内容。

您需要决定如何计算#box的宽度，但calc函数和box-sizing可能会有所帮助。

注意：有关Firefox中与使用顶部偏移和自动计算高度相关的错误的讨论。但是，与此同时，至少vertical-align可以完成工作。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

为什么我不能使用top：50％的自动高度元素？

2 个答案: