title: Positioning SVG at middle of browser window
body: <p>I have the following SVG definition and I can't seem to position the SVG window at the very center of the screen even though I specify the viewBox co-ordinates.</p>
  
  <pre><code>var width = 1000, height = 500;
  
  var svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);
  
  svg.append("defs").selectAll("marker")
              .data(["suit", "licensing", "resolved"])
              .enter().append("marker")
              .attr("id", function (d) {
                  return d;
              })
              .attr("viewBox", "100 -100 1000 500")
              .attr("preserveAspectRatio", "xMidYMid meet")
              .attr("display", "block")            
              .attr("refX", 25)
              .attr("refY", 0)
              .attr("markerWidth", 6)
              .attr("markerHeight", 6)
              .attr("orient", "auto")
              .append("path")
              .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
              .style("stroke", "#4679BD")
              .style("opacity", "0.6");
  </code></pre>
  
  <p>How do I position the SVG at the very center of my browser window?</p>