如何在html5中居中canvas

我一直在寻找一个解决scheme，但还没有find任何东西。 也许这只是我的search条件。 那么，我试图根据浏览器窗口的大小制作canvas中心。 canvas是800×600。 如果窗口低于800×600，它应该resize（但目前不是很重要）

Answer 1

为canvas提供以下CSS样式属性：

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

---

编辑

由于这个答案是相当stream行的，让我添加一点点细节。

上面的属性将水平居中canvas，div或其他任何相对于父项的节点。 没有必要更改顶部或底部边距和填充。 您指定宽度并让浏览器用剩余空间填充自动边距。

但是，如果你想input较less，你可以使用任何你想要的CSS速记属性，如

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

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

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

canvas将以position设置为relative或absolute的第一个父元素为中心，或者如果没有find元素，则为主体。

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

另外，请确保您使用的是最近的文档types，如xhtml或html 5。

Answer 2

你可以给你的canvas的CSS属性：

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

Answer 3

只要在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/

Answer 4

以上答案只适用于您的canvas与容器宽度相同的情况。

这工作不pipe：

 #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> 

Answer 5

我有同样的问题，因为我有很多不同宽度的图片，我只加载高度信息。 设置宽度可以让浏览器伸展和挤压图片。 我通过在image_tag行居中之前的文本行解决了这个问题（也摆脱了float：left;）。 我希望文本能够保持一致，但是这是一个小小的不便，我可以容忍。