ポップアップで出現する画像が中央配置になならい。

ポップアップで出現する画像のコードを書いているのですが、出現する画像が中央配置になりません。1300ｐｘの画面では真ん中に見える画像でも、600ｐｘの画面で観覧すると、中央配置にならないです。javascriptはちゃんと起動します。

text-align: center; margin 0 autoを追加しても中央配置になりません。

イメージ説明

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ポップアップ</title>
  
  <meta name="viewport" content="width=device-width,initial-scale=1">
  
  <style>


 .wrapper {
        overflow: hidden;
  
     }
     .popup {
  
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
/* 表示画像のスタイル */
.popup-inner {
  
  text-align: center;
  
  width: 90%;
  height: 90%;

  
  padding: 70px;
  background-color: rgb(49, 194, 239);
  z-index: 2;
}
/* 表示画像のスタイル */
.popup-inner img {
  width: 100%;

  
}
/* 閉じボタンをクリックすると閉じるイベントを発動する領域（✖ボタンの部分に領域してい */
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
/* 閉じボタンのスタイル */
.close-btn i {
  font-size: 20px;/* 閉じボタンの大きさ */
  color: #333;/* 閉じボタンの色 */
}
/* 閉じボタンのスタイル */
.close-btn1 {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}



img.examplepopwindow001{


  height: 260px;
  width: 64%;
  margin-bottom: -1px;/* 下余白vertical-align: bottom;効かない */
  
}
  </style>
</head>
<body>

<div class="wrapper">

    <div class="popup" id="js-popup">
        <div class="popup-inner">
            <div id="close-btn1" class="close-btn1">✖</div>  
          <div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
          <img src="image2/600.png" alt="ポップアップ画像" class=" examplepopwindow001">
          </div>
        <div class="black-background" id="js-black-bg"></div>
      </div>  
    
      


<script>

window.onload = function() {
  var popup = document.getElementById('js-popup');
  if(!popup) return;
  popup.classList.add('is-show');

  

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('js-close-btn');

  closePopUp(blackBg);
  closePopUp(closeBtn);
  

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}

</script>
</div>
</body>
</html>