title: How to center the center circle?
body: <p>How to center the center circle (CSS only)? &#160; <em>[Assume latest CSS3 browser support.]</em></p>
  
  <p>Must maintain v/h centering when parent w/h changes dynamically. </p>
  
  <p>Would the experimental CSS Box Model spec help here?</p>
  
  <p>Thanks. </p>
  
  <p><a href="http://jsfiddle.net/dragontheory/VdJFa/5/" rel="nofollow">http://jsfiddle.net/dragontheory/VdJFa/5/</a></p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="middle"&gt;
          &lt;div class="circle"&gt;
              &lt;div class="circle"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .parent         {display: table; 
                  margin: 50px auto;
                  background: lightgray;
                  height: 100px;
                  width: 100px;}
  
  .middle         {display: table-cell; 
                  vertical-align: middle;}
  
  .circle         {margin: auto;
                  border: solid 10px blue;
                  border-radius: 50%;
                  opacity: 0.3;
                  width: 50px;
                  height: 50px;}
  
  .circle .circle {width: 15px;
                  height: 15px;}
  </code></pre>