在徽标旋转木马中使图像彼此居中

<div class="carousel-container">
  <ul class="carousel-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
</div>

.carousel-container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.carousel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel-list li {
  float: left;
}

.carousel-list li img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

$(document).ready(function() {
  var containerWidth = $('.carousel-container').width();
  var containerHeight = $('.carousel-container').height();
  
  $('.carousel-list li').each(function() {
    var imageWidth = $(this).find('img').width();
    var imageHeight = $(this).find('img').height();
    
    var marginLeft = (containerWidth - imageWidth) / 2;
    var marginTop = (containerHeight - imageHeight) / 2;
    
    $(this).find('img').css({
      'left': marginLeft,
      'top': marginTop
    });
  });
});