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

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);