title: How to initially center an image inside inline-block container when using panzoom?
body: <p>I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container.</p>
  
  <p>I need to keep the style <code>#scene {display: inline-block;}</code> or else the panning inside bounds breaks.</p>
  
  <p>How can I center this image at load initially</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    const element = document.querySelector('#scene');
      let panZoomController = panzoom(element, {
        bounds: true,
        boundsPadding: 0.1
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.image-outer-wrapper {
    border: 3px solid red;
    overflow: hidden;
    height: 500px;
  }
  
  img {
    cursor: move;
    display: flex;
    justify-content: center;
  }
  
  #scene {
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.js"&gt;&lt;/script&gt;
  &lt;div class="image-outer-wrapper"&gt;
    &lt;div id="scene"&gt;
      &lt;img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>