resize - 在尊重媒体查询的同时使用 jquery 垂直居中容器

Question

我需要我的 jquery 将 div 垂直居中放置在 Document 上，并且如果浏览器调整大小，但我在组合 2 个脚本时遇到了困难。您可以在下面看到，我必须调用它两次才能让它在两种情况下都能正常工作。我敢肯定有更好的方法来写这个，但我有点不确定如何做到干净。

$(document).ready(function() {

if ($(window).width() >= 770){  

    var $el = $('#main');
    $el.css('position', 'absolute').css({
        left: ($(window).width() - $el.width()) / 2,
        top: ($(window).height() - $el.height()) / 2
    });
}


$(window).resize(function(){
    if ($(window).width() >= 770){  
        var $el = $('#main');
    $el.css('position', 'absolute').css({
        left: ($(window).width() - $el.width()) / 2,
        top: ($(window).height() - $el.height()) / 2
    });

    }   
});