jquery - 中心div在Firefox中垂直跳跃

Question

我创建了一个脚本来保持 div 居中在屏幕上。它在 safari 中运行良好，但由于某种原因会在调整窗口大小时跳转。我认为是负“保证金顶部”的两倍。有人对此有经验吗。我还没有尝试过 chrome 或 ie。

// 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();
});

网站网址：www.thebackroads.com.au

Answer 1

如果您登录$block.height()，您将看到加载时 javascript 生成的 margin-top 与调整大小时的不同，因为看起来您的容器实际上具有不同的高度。

这可能是由于第一次cent()调用是在 DOM 未完全加载时完成的。或者至少文本容器没有达到它的最终高度，因为您在加载图像时显示了一个预加载器。原因可能是您的外部库。看到DOM 没有完全加载？

您可以在萤火虫中清楚地看到这一点，当您计算高度时，您的内容是隐藏的。

在这里阅读一些解决方案：

jQuery：获取 jQuery 中隐藏元素的高度

Answer 2

或者试试这个脚本？计算窗口的高度。

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