Вертикальный центр на div не работает

Question

С самого начала я ищу решения для долгого времени и подобные вопросы по stackoverflow, но никто не работает для меня.

Вот jsFiddle: http://jsfiddle.net/ruudy/MJe3H/

Я хочу, чтобы центрировать материал-контейнер verticaly, он работает только горизонтально.

Я пробовал различные решения, как:

top: 0px; 
bottom: 0px; 
margin: auto; 

---

display: -moz-box; 
-moz-box-align: center; 
display: -webkit-box; 
-webkit-box-align: center; 
display: box; 
box-align: center; 

---

display: table-cell; 
vertical-align: center; 

Я стараюсь, чтобы увидеть, если родительский DIV сделать вертикальный центр не работает, но не находите любой ключ.

Заранее спасибо.

PD: Должно быть простой вещью, но я ее не нахожу.

Answer 1

Посмотрите этот сайт на объекты вертикального центра, это было очень полезно для меня.

vertical-centering-with-css

Answer 2

Вы можете выровнять вертикальный контейнер только тогда, когда он имеет известную высоту с помощью CSS-трюка.

Установите абсолютный контейнер с верхним положением 50%, а затем добавьте отрицательный запас полуразмера из контейнера.

.parent_container { 
    position: relative; 
} 

.container { 
    height: 500px; 
    position: absolute; 
    top: 50%; 
    margin-top: -250px; 
} 

Answer 3

Пробуйте использовать технику css-tables для вертикального центра.

Смотреть это LIVE DEMO

Подробнее о различных методах в this post.