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

Question

我对此事进行了一些研究，但似乎没有用。

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

因此，如果您查看图片，我希望将<svg>选项卡工具栏下方的所有内容都占据到页面底部（是视口还是窗口？）——也就是红色框中的所有内容。

这是我到目前为止的代码（只是<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

为了操纵圈子，我认为你需要玩

.attr("cx", (width/2))
.attr("cy", (height/2))

值并尽可能将 cx 值提高到屏幕宽度的大约一半。然后您可以将 cy 值设置为大约 20 左右。希望有帮助。

Answer 2

为了使您的圆在 x 轴上居中，您必须设置margin-right:auto;andmargin-left:auto;这将使您的圆在 x 轴上居中。至于你的<svg>，请确保 html 和 body 元素具有以下属性：

html, body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}

然后确保您<svg>具有以下属性：

svg {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}

那应该使您的圆圈居中并正确填充<svg>整个屏幕。

Answer 3

我认为box-sizing:border-box，，margin:0;padding:0;并且overflow:hidden应该涵盖几乎所有内容......