title: How to place Svg Circle into middle of the page
body: <p>I'm trying to place a large svg circle into the middle of the page - horizontally and vertically. Not working, any tips?</p>
  
  <p>Here is my code - using jade and scss:</p>
  
  <p>jade:</p>
  
  <pre><code>     .logo
          svg.logo__svg
             circle(
                r=300
                style="fill:none;stroke:white;stroke-width:1;")
  </code></pre>
  
  <p>scss:    </p>
  
  <pre><code>    .logo{
        height: 80%;
        width: 80%;
  
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
  
        @include element('svg'){
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 100%;
      }
    }
  </code></pre>