缩放和居中div问题

Question

我有DIV video + overlay + buttons。因此，我需要根据用户的视口尺寸缩放整个DIV以保持所有内容。

所以，我做了一个功能：

$(document).ready(function(){
    var avH = $(window).height()-20; /* -20 because I have header and footer */
    var avW = $(window).width();
    var scale = Math.min(avW / 300, avH / 200); /* 300 and 200 are the sizes of my original div */
      $('#bdemobox').css({
      transform: 'scale('+scale+')',
    });
  });

但是当视口太小时，我的DIV不会居中，而是直接离开屏幕。

你能帮帮我吗？

https://jsfiddle.net/okv85g5L/

编辑n°1：我认为中心问题是因为它是用我原来的DIV尺寸（来自CSS文件）完成的。所以现在它看起来像这样但仍然不能完美运行：/

    var avH = $(window).height()-180;
    var avW = $(window).width();
    var scale = Math.min(avW / 1536, avH / 834);
    var newW = $('#bdemobox').width(); 
    var cke = avW/2-newW/2;
    $('#bdemox').css({
        left:cke,
        transform: 'scale('+scale+')'
    });

https://jsfiddle.net/okv85g5L/1/