一个 div 在另一个 div 中的垂直对齐，具有 %-height

Question

如何垂直对齐位于另一个高度可变的 div 中的 div 中间？

例如：

#content {
    min-height:450px;
    margin-top:0px;
    padding-top:0px;
    border-bottom:1px solid #c9e3f3;
    margin-bottom:0;
    overflow:hidden;
}

#content .background {
    width:100%;
    min-height:450px;
    position:relative;
    left:0px;
    top:0px;
    z-index:-2;
}

#inside {
    position:absolute;
    height:200px;
    width:200px;
    right:-18px;
    top:50%; // doesn't work
}

    <div id="content">
    <img class="background" src="/background.jpg" alt="background" />
    <div id="inside">text
    </div>
    </div>

#content 的最小高度为 450px，但实际上是从位于 #content 中的图像 (.background) 获取它的（可变）高度。

Answer 1

试试这个：

#inside{
    position:absolute;
    height:200px;
    width:200px;
    top:50%;
    margin-top:-100px;
}

margin-top 应该固定居中，position:absolute 应该可以工作，如果不行，尝试“相对”。