title: Svg absolute center - How to keep proportions
body: <p>This is my code: <a href="http://jsfiddle.net/uorto4ny/2/" rel="nofollow">http://jsfiddle.net/uorto4ny/2/</a></p>
  
  <p>I'm trying to get a fluid sized SVG to stay in the middle of the page and keep it's proportions. So far it works on chrome but in IE and Firefox it does not keep its proportions (one side becomes longer than the other enough though they should be the same).</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>* {
      padding: 0;
      margin: 0;
  }
  body {
      font-family:"Helvetica Neue", Arial, Helvetica, sans;
      background: #f4f4f4 url('http://www.clker.com/cliparts/c/H/Y/E/V/s/theta-400x400.svg') no-repeat center center fixed;
      -moz-background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-size: 25% 25%;
  }
  a {
      position: absolute;
      bottom: 0;
      right: 0;
      margin: 0px 10px 10px 0px;
      padding: 10px 18px;
      text-decoration: none;
      font-size: 12px;
      text-align: center;
      background-color: #FFF;
      color: rgba(0, 0, 0, 0.44);
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      transition: background-color 0.3s ease 0s;
  }
  a:hover {
      background-color: rgba(87, 173, 104, 1);
      border: 1px solid rgba(87, 173, 104, 1);
      color: white;
  }
  </code></pre>
  
  <p>Can anyone please tell me where I am going wrong?</p>
  
  <p>James</p>