[ReactJS]JS讓圖片置中 without CSS

const settings = {
  target : {
    displayHeight: 400,
    displayWidth: 300
  }
}

getImageOriginalResolution = (base64) => {
    const image = new Image();
    image.onload = () => {
      this.setImageResolution(image.width, image.height)
      this.setState((ps) => ({...ps, imgRatio: image.width / image.height}))
    };
    image.src = base64;
  };
  setImageResolution = (imageWidth, imageHeight) => {
    const {target} = this.settings;
    let w = (imageWidth / imageHeight) * target.displayHeight;
    let h = (imageHeight / imageWidth) * target.displayWidth;
    imageWidth / imageHeight > target.displayWidth / target.displayHeight ? h = settings.displayHeight : w = settings.displayWidth;
    const marginLeft = (target.displayWidth / 2) - (w * 0.5);
    const marginTop = (target.displayHeight / 2) - (h * 0.5);
    this.setState((ps) => ({...ps, imageHeight: h, imageWidth: w, imgMarginLeft: marginLeft, imgMarginTop: marginTop}))
  }
  
  <img style={{width: imageWidth + 'px', height: imageHeight + 'px', marginLeft: imgMarginLeft + 'px', marginTop: imgMarginTop + 'px'}}/>