Vertical align middle div inside div

Question

Examining this HTML:

<div class="wrapper">
    <div class="content">
    </div>
</div>
<div class="footer">
    <hr />
    <p>some text</p>
</div>

and CSS:

.footer {
    position: absolute;
    height: 100px;
    width: 100%;
    bottom: 0;
    background-color: black;
}

.wrapper {
    padding-bottom: 100px;
    background-color: blue;
    height: 100%;
}

.content {
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: green;
}

html, body {
    width: 100%;
    height: 100%;
}

You can see that footer have position absolute and stay at the bottom of the page. wrapper will cover the remaining space and contain a content inside it. I want to vertical-align content without breaking the current layout. Do you have any suggestion?

Here is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath footer , this behavior doesn't occur when run the HTML file in browser).

Note: I don't want to use fixed height for wrapper , I want it covers all the remaining space, so please don't suggest me to use line-height

I tried the example here but it doesn't seem to work

NOTE I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on wrapper and content

NOTE 2 Sorry for not to clarify, actually, content doesn't have fixed size, its size depend on the content inside it, so the solution using negative margin doesn't work as I mentioned above

Answer 1

Here is one approach using the following CSS:

.footer {
    position: absolute;
    height: 100px;
    width: 100%;
    bottom: 0;
    background-color: black;
}

.wrapper {
    background-color: blue;
    position: absolute;
    top: 0;
    bottom: 100px;
    left: 0;
    right: 0;
}

.content {
    width: 200px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

Use absolute positioning and then negative margins, since your content has well-defined dimensions, this is relatively straightforward.

See demo at: http://jsfiddle.net/audetwebdesign/DgUV2/

For .wrapper , use the top, bottom, left and right offsets to stretch the div to the full width and height, taking into account the 100px for the footer.

For .content , set top and left to 50%, the center point of the .wrapper and then adjust for the center of the .content div using negative margins.

Remember to zero out the margin for the body or else you might see 10px whitespace depending on your browser.

Answer 2

Add this to your .content

position: relative;
top: 50%;
transform: translateY(-50%);

Just 3 lines of code to vertical align

Answer 3

I was able to get it to work using Method 1 from the example you linked

I added the following:

.content {
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: green;
    /* THE BELOW WAS ADDED */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

html, body {
    width: 100%;
    height: 100%;
    /* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
    margin: 0;
}

jsFiddle of working example