我想通过水平和垂直调整画布的大小和居中。我发现了几种解决方案，但是它们都不适合垂直对齐。我用这个例子：
function resize() {
let canvas = document.querySelector("canvas");
canvas.style.display = "block";
let width = window.innerWidth;
let height = window.innerHeight;
let wratio = width / height;
let ratio = config.width / config.height;
if (wratio < ratio) {
canvas.style.width = width + "px";
canvas.style.height = (width / ratio) + "px";
} else {
canvas.style.width = (height * ratio) + "px";
canvas.style.height = height + "px";
};
canvas.style.margin = "auto";
canvas.style.padding = "0";
}
此代码完美地调整了画布的大小并使其在水平方向上居中，但是这些更改都没有使垂直对齐的东西停留在浏览器的顶部（chrome）。谁能帮忙？非常感谢您的回答。
您可以将容器用作弹性框，然后使用justify-content将其水平对齐，并使用align-items将其在容器上垂直对齐，或者使用画布上的align-self将其垂直对齐。
您可以阅读有关Flexbox here的更多信息
.flexcontainer{
width:100vw;
height: 100vh;
background:orange;
/*Flex-Container*/
display: flex;
justify-content: center;
/*align-items: center;*/
}
.can{
align-self:center;
width:50vw;
height: 50vh;
background:red;
}<div class="flexcontainer">
<canvas class="can"></canvas>
</div>或者，如果有的话，将其弹出到body标签中。
<body style="display:flex;justify-content:center;align-items:center;">
<div id="game"></div>
</body>