title: JavaScript Zoom in on DIV center, without changing its size
body: <p>I am writing a client side JavaScript web app. I only use plain JavaScript, no libraries. I have a DIV which is the workspace. I have made it so that if you drag with the middle mouse button, everything in the workspace moves, to mimic moving the viewport itself. I really want to have it zoom when I scroll my mouse wheel. I use the CSS transform: scale() property for that. The problem with that is that it changes the size of the workspace itself, which I don't want, so I made it change the width and height of the workspace on zoom to keep it the same size. That would work great if I wanted to zoom from the top left corner, but I want it to zoom from the center. I tried to change the transform-origin to center but now when I zoom in, the workspace moves to the top right corner and when I zoom out, the workspace moves to the top-left corner. What I think is happening, is that the workspace changes its size from the center but it still resizes from the top left corner. What can I do?</p>
  <p>Edit: code I use for changing the scale:</p>
  <pre class="lang-js prettyprint-override"><code>container.onwheel = function(e) { //Disabled until answer to the zoom question on stackoverflow is given...
      e.preventDefault();
  
      let oldzoom = zoom_factor;
      if (zoom_factor &gt;= 0) {
          var zoomedinby = zoom_factor*-6/e.deltaY;
          zoom_factor += zoomedinby;
      }
      //Zoom in/out
      container.style[&quot;transform-origin&quot;] = &quot;50% 50%&quot;
      container.style.transform = `scale(${zoom_factor})`;
      console.log(container.style.transform);
  
      container.style.width = `${100/zoom_factor}%`;
      container.style.height = `${100/zoom_factor}%`;
  }
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.container {
      width: 100%;
      height: 100%;
      background-color: #00000000; /*Dark theme :D*/
      overflow: hidden; /*For srcolling behavior*/
  
      z-index: 0; /* Stay on bottom, used to make it work in combination with modals I have.*/
  
      transform: translate(0%, 0%);
      transform-origin: center center;
  }
  </code></pre>
  <p>I have a working version of the web app (for now without the zooming behaviour) online on <a href="https://thijmer.nl/logics/" rel="nofollow noreferrer">https://thijmer.nl/logics/</a></p>