vertical center svg in div container : <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>
