Сделать элемент заполнять доступной высотой

Question

Мне нужно, чтобы маркер элемента расширялся, чтобы он центрировался на странице.

Элементы 1 и 3 должны быть прикреплены соответственно сверху и снизу.
Элемент 2 имеет фиксированную высоту и должен быть центрирован на странице.

Я не уверен, если я объясняю это достаточно ясно, так что я нарисовал картину:

Answer 1

Fix элемент 1 и элемент 3 в верхнюю и нижнюю части страницы, соответственно, используя абсолютное позиционирование. Тогда абсолютно позиция элемента 2 топ для 50% и установить отрицательный верхний край половины его высоты:

#top, #middle, #bottom { position: absolute; left: 0; right: 0; } 
#top { top: 0; } 
#middle { top: 50%; margin-top: -25px; height: 50px; } 
#bottom { bottom: 0; } 

Try it.

Answer 2

В качестве альтернативы, вы могли бы сделать что-то вроде этого: Example

body, html { 
    height: 100%; 
    display: table; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
header, div, footer { 
    width: 100%; 
    display: table-row; 
} 
header { 
    height: 50px; 
} 
footer { 
    height: 50px; 
}