title: SVG not center in div on IE11
body: <p>I have an SVG inside a div that I am trying to center by using absolute positioning. On IE11 the SVG is off-center though. When I remove the absolute positioning it appears that the starting point of the SVG is different on IE11 and Chrome. On IE11 the SVG is a few pixels further down the page then on Chrome.</p>
  
  <p>I tried using a Flexbox solution instead of absolute positioning, but the same issue persists. Even when using <code>align-items: center</code> and <code>justify-content: center</code>, the IE11 version was a few pixels lower than the Chrome version.</p>
  
  <p>This leads me to believe it is really not a positioning issue at all, but rather there is some fundamental difference between SVG display or positioning on IE11. I am using a VM to debug on IE11 but it is extremely laggy and pain-staking to develop on. </p>
  
  <p>Is there some fundamental difference between display/positioning of SVG's on IE11? Can someone shed some light on this strange behavior?</p>
  
  <p><a href="https://jsfiddle.net/29zwax4j/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>Also, here is a screenshot of the same code running locally on both Chrome and IE11 side by side:
  <a href="https://i.stack.imgur.com/8XlLZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8XlLZ.png" alt="enter image description here"></a></p>
  
  <p>EDIT:</p>
  
  <p>It also appears like the SVG is off when I inspect it in IE dev tools:</p>
  
  <p><a href="https://i.stack.imgur.com/VYYzB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VYYzB.png" alt="enter image description here"></a></p>