使用％-height在另一个div中垂直对齐div

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应该工作，如果没有，请尝试'relative'。