Question

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

页眉/页脚与图像之间的空格应该相同，并且应该取决于浏览器窗口的高度。

图像具有固定宽度（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>-->

让它水平居中：

.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}

这是重要的代码：

http://jsfiddle.net/SFWBL/

Answer 1

看看this fiddle的基本前提，它应该足以让你开始。

HTML

<div id='header'></div>
<div id='image'></div>
<div id='footer'></div>

CSS

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

Answer 2

您可以尝试使用img <{1}}而不是background-image {/ 1}}

div

请参见修改后的JSFiddle

Answer 3

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

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

页眉和页脚之间的中间图像 - CSS

3 个答案: