title: CSS image centering within centered container gives unpredictable results
body: <p>For a while I was stumped my centered background images were not pixel-perfect aligned in their containers. I even got different results within the same browser but different windows</p>
  
  <p>Finally I found out what is happening, but I'm still short of a robust cross-browser solution.</p>
  
  <p>The case: I'm working on a collapsable tree-view in javascript. Everything is functioning alright, but in some cases the collapse/expand buttons are off one pixel to the left. </p>
  
  <p>The images for these buttons are user-definable, as well as the size (width) of the container they appear in. The images are drawn in the center of these containers with <code>background-position: center center;</code>. Now there are cases the image can't be fit <em>exactly</em> in the center of the container (for example, centering a 9px image in a 20px container, there's a 1-pixel difference on either side). This should be no problem, as long as we have consistent behaviour on how the browser handles this.</p>
  
  <p>But here's where it gets messy: I've implemented this tree-view inside a wrapper centered with <code>margin:0 auto;</code> based on the browsers viewport. And here is when I get different results when both the viewport centering and background centering don't fit exactly within the pixel boundaries.</p>
  
  <p>This is probably hard to follow, so I've squeezed the problem into a fiddle: <a href="http://jsfiddle.net/3y65wgu8/1/" rel="nofollow">http://jsfiddle.net/3y65wgu8/1/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper1 {
      width:400px;
  }
  #inner1 { /* perfect center */
      margin:0 auto;
      width:200px; 
      height:50px;
  }
  #wrapper2 {
      width:399px;
  }
  #inner2 { /* 1px-offcenter */
      margin:0 auto;
      width:200px; 
      height:50px;
  }
  #container { /* image 1px-offcenter (9px centered in 12px container) */
      width:12px; 
      height:12px;
      background:url(data:image/gif;base64,R0lGODlhCQAJALMAANLNve/s58a7rd7Vznuatf////f39wAAALXD1vfz7+fj3tbTxsa6pdbPxt7b0sa2pSH5BAAAAAAALAAAAAAJAAkAAAQoEJFJiSw4l6mxmUYYJgp4nKczJUngKsOkOMOyNMAECALDPAJLhYKIAAA7) no-repeat center center #444;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper1"&gt;
      &lt;div id="inner1"&gt;
          &lt;div id="container"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="wrapper2"&gt;
      &lt;div id="inner2"&gt;
          &lt;div id="container"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Two different wrappers centering their content, containing two identical containers having a small button drawn as background. Chrome seems to be the only browser that draws the buttons in alignment consistently, but firefox and IE show the problem I described. Try resizing your browser window, and see the buttons bounce from one side to the other.</p>
  
  <p>My question is: how can I get at least identical results, without losing flexibility on button/container/wrapper sizing and styling.</p>
  
  <p><strong>EDIT</strong>: Here's a picture that illustrates my use-case:</p>
  
  <p><a href="http://www.honey-pot.nl/dev/centering/example.jpg" rel="nofollow">Example</a></p>
  
  <p>The area marked in blue is the container that holds the collapse button. This area is always square, but may vary in size. The button can be any image smaller than this container and is placed directly on top where the lines meet. No stretching or scaling should occur on the image. In this example the button is too far to the left. Resizing my browser window makes the image jump in and out of correct alignment, as the fiddle above describes.</p>