Абсолютное вертикальное центрирование

[MeisMe]

Уважаемые участники форума, помогите советом.

Наткнулась на статью про вертикальное выравнивание http://http://habrahabr.ru/post/189696/, пыталась выровнять абсолютно позиционированный блок, как в самом начале статьи, но пример не работает  http://jsfiddle.net/MeisMe/fzuk9qxm/

Все уже перепробовала, не могу понять, что я упускаю из виду.

 

Хочется знать почему:

• Не происходит центрирования по вертикали если у родительского блока position:relative
• Высота блока с контентом равна 0 и не изменяется в зависимости от содержания
• Пример работает если у родителя position:static

Спасибо!

[Great Rash]

http://jsfiddle.net/fzuk9qxm/3/

[rus]

MeisMe, в подписи у Great Rash как раз есть ссылка на вашу тему

[Great Rash]

Кстати, есть ещё один способ вертикального выравнивания абсолютно всего, для продвинутых браузеров:

 

.block {  position: absolute;  top: 50%;  left: 50%;   transform: translate3d(-50%, -50%, 0);}

[MeisMe]

http://jsfiddle.net/fzuk9qxm/3/

Спасибо, Great Rush! я думала в этом направлении, и задавала высоту то html и body, то блоку-контейнеру, а вместе не допетрила )

и спасибо за еще один метод

MeisMe, в подписи у Great Rash как раз есть ссылка на вашу тему

Спасибо, с этим материалом я уже разобралась

[MeisMe]

 

Кстати, есть ещё один способ вертикального выравнивания абсолютно всего, для продвинутых браузеров:

.block {  position: absolute;  top: 50%;  left: 50%;   transform: translate3d(-50%, -50%, 0);}

Друзья, а почему у меня в данном случае текст не выравнивается? http://jsfiddle.net/fzuk9qxm/6/

[pangurban]

Друзья, а почему у меня в данном случае текст не выравнивается? http://jsfiddle.net/fzuk9qxm/6/

 

Таким способом выравниваются блоки фиксированных размеров. Пропиши высоту

Edited October 13, 2014 by pangurban

[MeisMe]

 

Друзья, а почему у меня в данном случае текст не выравнивается? http://jsfiddle.net/fzuk9qxm/6/

 

Таким способом выравниваются блоки фиксированных размеров. Пропиши высоту

 

Спасибо! Но вот здесь сказано, что используя display:table можно выровнять элементы с изменяемой высотой.

Edited October 13, 2014 by MeisMe

[SelenIT]

А в каком браузере не выравнивается?

[MeisMe]

А в каком браузере не выравнивается?

Internet Explorer 11 - верхний левый край

Mozila FF 32.0.3 - верх посередине