如何保持填充窗口的元素居中

How do I keep an element that fills the window centered?

本文关键字：元素 窗口 何保持 填充      更新时间：2023-10-15

调整窗口大小时，如何使此演示中的画布始终居中（包括滚动条出现时）？画布元素应始终填充窗口。

我试着玩left、margin-left等设置（包括负值），但没有用。

这是你想要的吗？

这是代码的重构版本，它在窗口调整时将画布调整为窗口的最小尺寸（宽度或高度）。它还将画布的display设置为block，并使用margin: 0 auto将其居中

这是演示。

UPDATE 1我用注释进行了重构，以显示在哪里更改代码，从而将画布调整为窗口高度和宽度之间的最大尺寸。

UPDATE 2我进行了重构以适应画布，因此通过将宽度和高度设置为精确的窗口，十字光标始终居中。

我还更新了CSS，删除了所有的填充和边距。

画布在window.onresize上重新绘制。

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
function setSize() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  //var size = (h > w) ? h : w;   //<<<< resize to largest between height and width
  //var size = (h < w) ? h : w; //<<<< resize to smallest between height and width
  //canvas.width = size;
  //canvas.height = size;
  canvas.width = w; 	//<<<< exact resizing to width
  canvas.height = h; 	//<<<< exact resizing to height
}
function draw() {
  var context = canvas.getContext('2d');
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.strokeStyle = 'red';
  context.moveTo(canvas.width/2, 0);
  context.lineTo(canvas.width/2, canvas.height);
  context.moveTo(0, canvas.height/2);
  context.lineTo(canvas.width, canvas.height/2);
  context.stroke();
}
setSize();
draw();
window.onresize = function(e) {
  setSize();
  draw();
};
* {
  padding: 0;
  margin: 0;
}
canvas {
  display: block;
  margin: 0 auto;
}

您尝试过overflow: hidden;吗？

JSFiddle

body {
  overflow: hidden;
}

您可以执行以下操作帆布{位置：固定；顶部：-500px；}

要使画布随页面调整大小，请尝试添加窗口调整侦听器：

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.width = window.innerHeight;
});

如果你想删除页边空白，使画布填充整个页面，请尝试在页面中添加以下CSS：

body {    
    margin: 0 !important;
    padding: 0 !important;
}

经过一番努力，我想我已经想通了。这是工作演示（全屏版）。我最终使用了以下循环：

function render() {
    requestAnimationFrame(render);
    window.scrollTo(
        document.documentElement.scrollWidth/2 - window.innerWidth/2, 
        document.documentElement.scrollHeight/2 - window.innerHeight/2
    );
}
requestAnimationFrame(render);

其自动将窗口滚动到整个可滚动区域（包括不可见部分）的中间减去观看区域本身大小的一半。

感谢大家的帮助！

相关文章：