title: Centering responsive svg circle in container
body: <h2><a href="http://jsbin.com/lurepim/edit?html,css,output" rel="noreferrer">Test page</a></h2>
  
  <h3>Markup:</h3>
  
  <pre><code>&lt;svg viewBox="0 0 400 400"  preserveAspectRatio="xMinYMin meet"&gt;
      &lt;g&gt;
          &lt;circle r="70" class="circle-back" /&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>.doughnutChart{
      text-align:center;
      padding:50% 1em 0;
      position: relative;
      overflow: hidden;
  
      &gt; svg{
          position: absolute;
          top: 0;
          left:0; right:0;
          margin: auto;
  
          g{ transform:rotate(270deg) translate(-88px, 200px); }
      }
  
      circle{ fill: none; }
      .circle-back { stroke:#EEE; stroke-width: 5px; }
  }
  </code></pre>
  
  <p>As you can see in the test page, I am trying to position a responsive circle with some radius, and I want it to position itself in the middle of the container, regardless the width of the container. It would be even better if the circle also fit itself to the height of the container. </p>
  
  <p>There seem to be a problem with css <code>translate</code> using percentages on the <code>g</code> element, which prevents me from just doing <code>translate(-50%, -50%)</code> </p>
  
  <hr>
  
  <p><em>This is a very simplified version of what I have, since in my code it's a doughnut chart, this is why it has this <code>rotate</code> transform to it</em></p>