在javascript中使图像居中

<div style="display: flex; justify-content: center;">
  <img src="image.jpg" alt="图像">
</div>

<div style="text-align: center;">
  <img src="image.jpg" alt="图像">
</div>

<div id="container">
  <img src="image.jpg" alt="图像">
</div>

<script>
  var container = document.getElementById('container');
  var image = container.querySelector('img');
  
  image.onload = function() {
    var containerWidth = container.offsetWidth;
    var containerHeight = container.offsetHeight;
    var imageWidth = image.width;
    var imageHeight = image.height;
    
    var left = (containerWidth - imageWidth) / 2;
    var top = (containerHeight - imageHeight) / 2;
    
    image.style.position = 'absolute';
    image.style.left = left + 'px';
    image.style.top = top + 'px';
  };
</script>

<div style="position: relative;">
  <img src="image.jpg" alt="图像" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">
</div>