html - div中的垂直居中图像

Question

我尝试将图像垂直居中放置在正文中间，但似乎没有任何效果。我尝试了在这里找到的不同技巧(高度 100%、表格单元格、position:relative...)，但直到现在都没有运气。我的代码是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;
}

我在这里做了一个 fiddle :http://jsfiddle.net/dragoeco/hjcz6j0r/1/我正在寻找 IE8+ 的工作解决方案，所以也许有一种 jQuery 方法可以完成这项工作？对我来说重要的是将页脚保持在视口(viewport)的底部，这就是为什么我对页脚使用绝对位置。谢谢。

Answer 1

可能是这样的:

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;
}