javascript - 如何根据身体高度动态更改元素边距顶部

Question

我的身体中有一个容器，我需要将此元素设置为居中垂直对齐。我需要这样做也取决于身高，并动态改变它。

我尝试了类似下面的代码，但它不能完美地工作，最重要的是不是动态的。注意：我不能用 css 做到这一点。

var ah = $('body').height();
var ph = $('#main_container').parent().height();
var mh = Math.ceil((ph-ah) / 2);
$('#main_container').css('margin-top', mh);

Answer 1

将其绑定到resize事件：

$(window).on('resize', function() {
    var $container = $('#main_container');
    var height = Math.ceil(($container.parent().height() - $('body').height()) / 2);

    $container.css({marginTop: height});
}).trigger('resize');

它不会像 CSS 那样流畅，但它会起作用。为什么你不能用 CSS 来做呢？

Answer 2

您可以使用 JQuery 注入 CSS：

$('#main_container').css("position", "absolute");
$('#main_container').css("margin-top", "auto");
$('#main_container').css("margin-bottom", "auto");
$('#main_container').css("top", 0);
$('#main_container').css("bottom", 0);

如果你还想水平居中，你可以删除margin-top和margin-bottom行，并添加：

$('#main_container').css("margin", "auto");
$('#main_container').css("left", 0);
$('#main_container').css("right", 0);