title: vertical center svg in div container
body: <p>Can you help me to understand why my svg refuse to resize the height for helping me to center vertically in a div container ?</p>
  
  <p>How can I process for align vertical svg in a container ? I seem to svg behaviour is not standard like div...</p>
  
  <p>The main idea is that center horizontally AND vertically svg into a div.</p>
  
  <p>I try this : <a href="https://jsfiddle.net/gbz7rp7u/1/#&amp;togetherjs=0n9iL62pHv" rel="noreferrer">https://jsfiddle.net/gbz7rp7u/1/#&amp;togetherjs=0n9iL62pHv</a></p>
  
  <pre><code>&lt;div id="svg-container"&gt;
    &lt;svg id="svg-1" height="50%" width="50%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
       &lt;circle r="15" cx="350" cy="80"&gt;&lt;/circle&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  
  #svg-container
  {
    background-color: red;
  }
  
  #svg-1
  {
    margin: auto auto;
    display: block;
    height: 30%;
  }
  </code></pre>