Html 在页眉和页脚中间的图像-CSS

我想用页眉、页脚和图像构建一个简单的登录页-正好在页眉和页脚之间（水平/垂直居中）

页眉/页脚和图像之间的间距应相同，并且应取决于浏览器窗口的高度

图像具有固定宽度（900px）和固定高度（600px）

胡：这是一个粘脚

我试过这样的方法：

{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}

我的html：

     <div class="fbg">
<div class="fbg_resize">
    <img src="images/image.png" width="900" alt=""  />
</div>
    <!--<div class="clr"></div>-->

以下是重要的代码：

看看基本前提，它应该足以让你开始

HTML

---

您可以尝试使用

div的
background image
，而不是使用
img

html，正文{
身高：100%；
}
.光纤光栅{
背景图片：url(http://lorempixel.com/900/600);
背景位置：中心；
背景重复：无重复；
宽度：100%；
身高：100%；
}

请参见修改的相对（百分比）位置是让元素识别浏览器窗口大小的方法。由于它们作用于边缘（顶部、左侧），因此必须使用负边距将项目向上移动到项目高度的一半。因为您知道图像的固定高度是600px，所以需要-300px。你想给你的形象：

position: absolute;
top: 50%:
margin-top: -300px;

页脚是否固定在页面底部？（sticky footer？）您需要向我们展示迄今为止您尝试过的任何代码，而不仅仅是请他人为您制作。请在您的问题中展示完整的代码，包括HTML和CSS，最好是以一种简单的方式。
<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>

html, body{
    text-align:center;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#header, #footer{
    height:50px;    
    width:100%;
}
#image{
    height:50px;
    width:50px;
    margin:-25px auto 0 -25px;
    background:grey;
    position:absolute;
    top:50%;
    left:50%;
}
#header{
    background:blue;
}
#footer{
    position:absolute;
    bottom:0px;
    background:red;
}

position: absolute;
top: 50%:
margin-top: -300px;