Question

我尝试将图像垂直居中放在身体中间，但似乎没有任何效果。我在这里尝试了不同的技巧（高度100％，桌面，位置：相对......），但直到现在还没有运气。我的代码是 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;
}

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

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

Answer 2

我使用以下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;
}

来源：http://www.w3.org/Style/Examples/007/center.en.html#vertical

Answer 3

添加：

.image{
    position: absolute;
    top: 50%;
    margin-top: -100px;
}

它适用于所有地方（IE6-7除外，可能需要相对位置）。您可以对水平居中做同样的事情。

这是小提琴：http://jsfiddle.net/hjcz6j0r/7/

div中的垂直居中图像

3 个答案: