Центрируйте div вертикально с анимацией

Question

Я хотел бы центрировать .presentation div вертикально, но с анимацией. Перемещение снизу вверх 10%.

Мне нужно сохранить значение высоты для родительского div .parent как 75% или 100%, но мой текст останется вертикально вертикально.

Могу ли я помочь?

http://jsfiddle.net/Xroad/4t9vsym3/2/

$('.presentation').animate({ 
    top: '40%', 
    opacity: '1' 
}, 1700, function() {}); 

.parent { 
    height: 75%; 
    width: 100%; 
    background: red; 
} 

.presentation { 
    position: absolute; 
    max-width: 1100px; 
    margin: auto; 
    top: 50%; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    opacity: 0; 
    text-align: center; 
    z-index: 1; 
} 

Answer 1

Дефект в коде является то, что вы пытаетесь приблизить отклонение верхней части текста на 10% (50% - 10% = 40%). Вместо этого следует рассчитать это отклонение на $('.presentation').outerHeight()/2 Посмотрите на это fiddle.

Там я положил текст прямо под DIV, в котором он должен быть по центру, а затем пусть анимировать вверх ($('.parent').outerHeight() - $('.presentation').outerHeight())/2 что составляет

$('.parent').outerHeight()/2 - $('.presentation').outerHeight()/2 

(я дополнительно установить overflow:hidden CSS-свойство .parent)

EDIT:

Я поправил расчет с использованием h2-топ и высоту как ссылку .. теперь она сосредоточена вне содержания

var $par = $('.parent'); 
var $pres = $('.presentation'); 
var initTop = $par.offset().top + $par.height() * 0.9; 

$pres.offset({left: $pres.offset().left , top : initTop}); 
var delta = $pres.find('h2').offset().top - ($par.offset().top + ($par.height() - $pres.find('h2').height())/2); 
$pres.animate({ 
    top: '-=' + delta, 
    opacity: '1' 
}, 1700, function() {}); 

http://jsfiddle.net/4t9vsym3/9/

Answer 2

Вы можете использовать CSS преобразования, чтобы компенсировать позиции текстового путем половине его высоты:

-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%); 

Например: http://jsfiddle.net/4t9vsym3/6/

PS .parent должен быть position:relative в закажите для .presentation, чтобы быть правильно размещены внутри него.

Answer 3

Вам просто нужно выполнить быстрые вычисления высоты.

Верхняя позиция вашего элемента должна быть:

(heightOfParent - heightOfCenteredElement)/2 

Вот скрипка: http://jsfiddle.net/urmg48ba/

EDIT: скрипка была нарушена. Обновлено.