Javascript 如何将脚本居中对齐

我制作了一个简单的游戏，在代码中使用了我制作的画布上的JavaScript。 我希望这是居中对齐/定位在页面上的某个地方，虽然我不知道如何做到这一点。游戏内容如下：

控制：
使用和箭头控制咸肉食用者

规则：
在分配的时间内收集最多量的培根

使用CSS将元素居中相当容易。将元素括在

div

中，并应用以下html规则：

margin: 0 auto;
width: *some-percent-here*%;

希望这有帮助！ 干杯

编辑：

例如，如果要将

关于
部分的宽度设为50%居中，可以使用：
（用于可视化目的的背景色…）

注意：这将使div居中-而不是div内的内容

对于文本居中使用：

text-align: center;


为了完整性，应该注意，可以使用javascript应用的样式将div居中。然而，在我看来，您的解决方案需要画布的静态位置-使html成为更好的选择…
只需将主体选择器的CSS规则更改如下：

body {
  background-color: black;
  color: grey;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

我试图添加一个div，但脚本似乎放在页面底部，忽略了它周围的任何内容，包括div。还有什么可以用的吗？脚本不能决定游戏的位置。尝试将画布包含在
div
中。。。换句话说，尝试用html而不是javascript创建画布。（我相信这是你的问题）
text-align: center;

body {
  background-color: black;
  color: grey;
  margin: 0 auto;
  text-align: center;
  width: 80%;
}