Javascript 如何根据主体高度动态更改元素边距顶部

我体内有一个容器，我需要将该元素设置为垂直居中对齐。我需要根据身高来做这件事，并动态地改变它

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

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

---

将其绑定到

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执行此操作？

将其绑定到

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呢？

可以使用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);

如果还希望将其水平居中，可以删除

页边距顶部

和

页边距底部

行，然后添加：

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

---

您可以使用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);

如果还希望将其水平居中，可以删除

页边距顶部

和

页边距底部

行，然后添加：

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

---

我不知道为什么，但它不起作用，我有一些其他隐藏元素，如果我用css做这件事，它将粉碎他们…我不知道为什么，但它不起作用，我有一些其他隐藏元素，如果我用css做这件事，它将粉碎他们。。。