vertically centered image in div - html

Question

I try to vertically center an image in the middle of the body but nothing seems to work. I've tried different tricks found here (height 100%, table-cell, position:relative...), but with no luck until now. My code is
html:
<div id="container">
<div id="header">Header</div>
<div id="body">
<div class="image"></div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height: 200px;
width: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
I made a fiddle here: http://jsfiddle.net/dragoeco/hjcz6j0r/1/
I looking for a working solution with IE8+ so maybe there is a jQuery way to do that job? What is important for me is to keep the footer at the bottom of the viewport so that's why I used a obsolute position for footer. Thanks.

Answer 1

Something like this maybe :
LIVE EXAMPLE
html, body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: table;
margin-top:-60px; //height of the footer
}
#body {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center;
height:200px;
}
#header {
background:#ccc;
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}

Answer 2

I had success with the following CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ccc;
padding:10px;
position: relative;
}
#body {
padding:10px;
padding-bottom:60px;
position: relative;
}
.image {
background: url("http://lorempixel.com/300/200/nature/") no-repeat center ;
position: absolute;
height: 200px;
width: 100%;
top: 50%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#ccc;
}
Source: http://www.w3.org/Style/Examples/007/center.en.html#vertical

Answer 3

Add this:
.image{
position: absolute;
top: 50%;
margin-top: -100px;
}
It works everywhere (except IE6-7, position relative may be needed there). You can do the same for horizontal centering.
Here is the fiddle: http://jsfiddle.net/hjcz6j0r/7/