如何在 html5中居中画布

我一直在寻找一个解决方案，但没有找到任何东西。也许这只是我的搜索条件。 我试着根据浏览器窗口的大小设置画布中心，画布大小是800x600。 如果窗口低于800x600，它也应该调整大小(但这在目前不是很重要)

286242 次浏览
小开

只要在 HTML 中将 div 居中即可:

  #test {
width: 100px;
height:100px;
margin: 0px auto;
border: 1px solid red;
}




<div id="test">
<canvas width="100" height="100"></canvas>
</div>

只要将高度和宽度改为任意值就可以得到一个居中的 div

Http://jsfiddle.net/bvghc/2/

小开

赋予画布以下 css 样式属性:

canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
}

剪辑

由于这个答案很受欢迎，让我再补充一些细节。

上面的属性将 水平方向置于画布、 div 或其他相对于其父节点的节点的中心。不需要更改顶部或底部的边距和填充。您可以指定一个宽度，然后让浏览器用自动边距填充剩余的空间。

但是，如果您想要输入更少的内容，您可以使用任何您希望的 css 速记属性，比如

canvas {
padding: 0;
margin: auto;
display: block;
width: 800px;
}

然而，将画布 垂直的居中需要一种不同的方法。您需要使用绝对定位，并指定宽度和高度。然后将左边、右边、顶部和底部属性设置为0，并让浏览器用自动边距填充剩余的空间。

canvas {
padding: 0;
margin: auto;
display: block;
width: 800px;
height: 600px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

画布将基于将 position设置为 relative或 absolute的第一个父元素，或者如果没有找到主体，则画布将自己居中。

另一种方法是使用在 IE11中可用的 display: flex

另外，确保使用最近的 doctype，如 xhtml 或 html 5。

小开

我有同样的问题，因为我有许多不同的宽度图片，我加载只与高度信息。设置宽度允许浏览器拉伸和挤压图片。为了解决这个问题，我将文本行放在 image _ tag 行的前面(同时去掉 float: left;)。我希望文本能保持对齐，但这是一个小的不便，我可以容忍。

小开

您可以给您的画布 ff CSS 属性:

#myCanvas
{
display: block;
margin: 0 auto;
}
小开

上面的答案只有在你的画布和容器的宽度相同的情况下才有效。

无论如何，这都是有效的:

#container {
width: 100px;
height:100px;
border: 1px solid red;
  

  

margin: 0px auto;
text-align: center;
}


#canvas {
border: 1px solid blue;
width: 50px;
height: 100px;
  

}
<div id="container">
<canvas id="canvas" width="100" height="100"></canvas>
</div>

小开

使用以下代码:

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>


<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>


</body>
</html>
小开

把 text-align: center;加到 <canvas>的 家长标签上，就这样。

例如:

<div style="text-align: center">
<canvas width="300" height="300">
<!--your canvas code -->
</canvas>
</div>
小开

要使画布元素水平居中，必须将其指定为块级别，并将其左右边距属性留给浏览器:

canvas{
margin-right: auto;
margin-left: auto;
display: block;
}

如果你想让它垂直居中，画布元素需要绝对定位:

canvas{
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

如果你想让它水平和垂直居中，那就这样做:

canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

更多信息请访问: https://www.w3.org/Style/Examples/007/center.en.html

小开

用电网？

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}


body {
display: grid;
grid-template-rows: auto;
justify-items: center;
align-items: center;
}


canvas {
height: 80vh;
width: 80vw;
display: block;
}
<html>
<body>
<canvas></canvas>
</body>
</html>

小开

您也可以使用 Flexbox，但是 canvas元素必须位于 div内部，仅仅将其应用于 canvas元素是不起作用的。

HTML:

<div class="canvas-container">
<canvas width="150" height="200"></canvas>
</div>

CSS:

.canvas-container {
display: flex;
align-items: center;
justify-content: center;
}

提交答案