css - 另一个 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 的最小高度为 450 像素，但实际上是从位于 #content 中的图像 (.background) 获取它的(可变)高度。

Answer 1

试试这个:

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

margin-top 应该固定居中，position:absolute 应该可以，如果不行，试试'relative'。