如何在javascript幻灯片中垂直和水平居中显示图像？

<div id="slide">
  <img src="image.jpg" alt="Image">
</div>

#slide {
  position: relative;
  width: 500px;
  height: 300px;
}

$(window).on('load', function() {
  var slide = $('#slide');
  var img = slide.find('img');
  
  // 图像加载完成后执行
  img.on('load', function() {
    var imgWidth = img.width();
    var imgHeight = img.height();
    var slideWidth = slide.width();
    var slideHeight = slide.height();
    
    // 计算水平和垂直偏移量
    var marginLeft = (slideWidth - imgWidth) / 2;
    var marginTop = (slideHeight - imgHeight) / 2;
    
    // 设置图像容器的边距
    img.css({
      'margin-left': marginLeft + 'px',
      'margin-top': marginTop + 'px'
    });
  });
});