html - 如何在 html5 中居中画布

为画布提供以下 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; } 

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

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

画布将根据position设置为relativeor的第一个父元素absolute或主体（如果没有找到）居中。

另一种方法是使用display: flexIE11 中提供的

此外，请确保您使用最新的文档类型，例如 xhtml 或 html 5。

83

你可以给你的画布 ff CSS 属性：

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

74

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

63

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

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

51

您也可以使用 Flexbox，但是canvas元素必须在 a 内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; }