Изображение в середине между верхним и нижним колонтитулом - CSS

Question

Я хочу создать простую целевую страницу с заголовком, нижним колонтитулом и изображением - точно между заголовком и нижним колонтитулом (по горизонтали/по вертикали).

Пространство между верхним и нижним колонтитулом и изображением должно быть одинаковым и должно зависеть от высоты окна браузера.

Изображение имеет фиксированную ширину (900 пикселей) и фиксированную высоту (600 пикселей).

Aw: это липкое сноска

Я пытался что-то вроде этого:

{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, вы можете попробовать background-image для div

html, body { 
    height: 100%; 
} 

.fbg { 
    background-image: url(http://lorempixel.com/900/600); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
} 

См модифицирована JSFiddle

Answer 3

Относительные (процентные) позиции - это способ заставить ваши элементы распознавать размер окна браузера. Поскольку они работают по краям (сверху, слева), вы должны использовать отрицательный запас, чтобы переместить элемент на половину высоты вашего предмета. Поскольку вы знаете, что фиксированная высота вашего изображения составляет 600 пикселей, вам нужно -300 пикселей. Вы хотите представить свое изображение:

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