title: Keeping content centered when zooming
body: <p>I have a simple example of centered content using HTML and CSS (<a href="http://jsfiddle.net/ysyxV/" rel="nofollow noreferrer">jsfiddle</a>).  The screenshot is below:</p>
  
  <p><img src="https://i.stack.imgur.com/kasMJ.png" alt="Unzoomed content"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body class="" lang="en-US"&gt;
      &lt;div class="wrapper"&gt;
          Some stuff
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html 
  {
      background: lightgray; /* Background color of whole window */
      border: 2px solid orange; /* Debug */
      width: 20em; /* The width of the content */
      margin: 2em auto;
  }
  
  body
  {
      border: 2px solid purple;
  }
  
  .wrapper
  {
      background: lightgray; /* Background color of whole window */
      border: 2px solid orange; /* Debug */
  }
  </code></pre>
  
  <p>When I zoom in using the browser zoom, the content stays on the left hand side as you zoom in:</p>
  
  <p><img src="https://i.stack.imgur.com/HkcMx.png" alt="Zoomed Content"></p>
  
  <p>What I would like to have happen is the content say in the middle of the window as you zoom:</p>
  
  <p><img src="https://i.stack.imgur.com/Lp7Uf.png" alt="Desired zoom result"></p>
  
  <p>Is there an easy way to do this using CSS.  I dont want to use jquery or any other way if possible.</p>
  
  <p><strong>Update</strong> as @Mr Lister points out, <code>this "problem" has nothing top do with zoom. The very same thing happens if the user makes the window narrower until the horizontal scrollbar appears. Are you saying you want the scrollbar to automatically go to the center then too? That would require Javascript</code></p>
  
  <p>I don't think I would want that. It seems like the user experience from that might be a bit weird. I don't want to force it to be in the center all the time, not allowing them to move to other sections of the page. Just keep it centered when the horizontal scrollbar first appears and on subsequent zoom ins. If the user changes the position of the scrollbar while zoomed it, it wouldn't need to recenter on subsequent zooms. This was just more for initial scrollbar showing. Hopefully that makes sense. Whether its 'right or wrong' could be debated, but this is what I desire.  Let me know if you need further clarification </p>