一个div在另一个div中的垂直对齐，高度百分比

Question

How can I vertical align middle a div that is positioned in another div that has a variable height?

For example:

#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 has a min-height of 450px but actually get's it's (variable) height from an image (.background) that is positioned in #content.

Answer 1

Try this:

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

The margin-top should fix the centering, and position:absolute should work, if not, try 'relative'.