javascript - 如何根据屏幕宽度/高度在 中居中

Question

我做了一些 research在这件事上，但似乎没有用。

我希望能够制作一个 <svg>包含整个浏览器屏幕的容器(也就是除选项卡、工具栏等以外的所有内容)。

所以如果你看图片，我想要 <svg>占据选项卡工具栏下方到页面底部的所有内容(是视口(viewport)还是窗口？)——也就是红色框中的所有内容。

这是我到目前为止的代码(只是 <script /> ):

<script>
function startThePage(){
  var height = $(document).height();
  var width  = $(document).width();

  var svgSelection = 
    d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  var myCircle = svgSelection
      .append("circle")
      .attr("cx", (width/2))
      .attr("cy", (height/2))
      .attr("r", 22)
      .style("fill", "lightgray")
      .style("stroke", "gray");

};
//alert(window.screen.availWidth);
//alert(window.screen.availHeight);

</script>

出于某种原因，这似乎使文档稍大一些，这意味着用户可以来回滚动(现在其中只有一个填充圆圈，我想将其居中)。这使圆圈偏离了中心。我该如何解决？

Answer 1

我认为 box-sizing:border-box、margin:0;padding:0; 和 overflow:hidden 应该覆盖大部分一切……