title: How to center a scrollable image that is larger than the screen
body: <p>I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image. </p>
  
  <p>The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.</p>
  
  <p>Here is the fiddle that has some fixup javascript to make it work: <a href="http://jsfiddle.net/d3y0b8bd/" rel="nofollow">http://jsfiddle.net/d3y0b8bd/</a></p>
  
  <p>The code below will work for smaller images (e.g. <a href="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png" rel="nofollow">https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png</a>) </p>
  
  <p>But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.</p>
  
  <pre><code>.lightboxRoot {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: auto;
      /*aesthetic*/
      background-color: red;
  }
  .lightboxImg {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
      /*aesthetic*/
      background-color: blue;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="lightboxRoot"&gt;
      &lt;div class="lightboxImg"&gt;
          &lt;img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"&gt;&lt;/img&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>