центр div вертикально прыгает в firefox

Question

Я создал скрипт, чтобы держать div на экране. Он отлично работает в сафари, но почему-то прыгает при изменении размера окна. Я предполагаю, что это удвоение отрицательной «margin-top». У кого-нибудь есть опыт с этим. Я не пробовал в хроме или т.

// PART B 
function cent() { 
var $block = $("#block"), 
    margintop = parseInt($block.height()/-2); 
console.log('called'); 
$('#block').css("margin-top", margintop); 
}; 

$(document).ready(function(){ 
cent(); 
}); 
$(window).resize(function(){ 
cent(); 
}); 

сайт URL: www.thebackroads.com.au

Answer 1

Или попробуйте этот сценарий? Вычислите с высотой окна.

function cent() { 
    var margintop = ($(window).height() - $('#block').height())/2; 
    $('#block').css("margin-top", margintop); 
}; 

Answer 2

При входе $block.height() Вы увидите Javascript генерироваться Маржа верхом на нагрузке отличается от при изменении размера, потому что кажется ваш контейнер на самом деле имеет разную высоту.

Возможно, это связано с первым вызовом cent(), когда DOM не загружена полностью. Или, по крайней мере, текстовый контейнер не достиг конечной высоты, потому что вы показываете прелоадер при загрузке изображения. Причиной этого является, вероятно, ваша внешняя библиотека. См. DOM not fully loaded?

Вы можете ясно видеть это в firebug, когда ваш контент скрыт при вычислении высоты.

Прочитайте некоторые решения здесь:

jQuery: Get height of hidden element in jQuery