如何在HTML5中将画布居中

105

我一直在寻找解决方案已有一段时间，但没有发现任何东西。也许这只是我的搜索字词。好吧，我试图根据浏览器窗口的大小使画布居中。画布是800x600。而且如果窗口低于800x600，它也应该调整大小（但目前还不是很重要）

— 约尔根
source

在调整大小时，如何告诉它制作整页画布而没有给出尺寸且没有滚动条？

— jorgen

2

不要在HTML中执行..使用javascript，使用诸如appendChild之类的东西，并将width和height设置为window.innerWidth和window.innerHeight

— JinX 2011年

173

为画布提供以下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设置为relative或的第一个父元素absolute或如果未找到任何正文，则将自身居中。

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

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

— 马可·卢格利奥
source

8

显示：块；保证金：0自动0自动; 也足够了。谢谢！

— 克里斯

对于垂直居中的画布，只要在HTML中指定宽度和高度，就无需输入宽度和高度。无论如何，在Chrome上。

— 扎克

1

宽度和高度可以在CSS或HTML中指定。但是css是推荐的方法，因为所有表示逻辑都应该放在那儿。

— Marco Luglio '16

1

它在画布上居中，但是如果在画布上绘制图像，则它正在拉伸。您能在不拉伸图像的情况下使画布居中吗

— aryan 2013年

在画布元素上以内联样式设置高度和宽度会弄乱我绘制的图像等的大小。只是警告，希望可以节省一些人的挫败感。

— MrBoJangles

52

您可以为画布提供ff CSS属性：

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

— 金迈克尔
source

你能提供一个jsfiddle吗？这种方法似乎不起作用

— jose.angel.jimenez，2016年

3

这适用于水平居中，但不适用于垂直居中。

— Matty J

20

只需将div放在HTML中：

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

— 乔·钱弗隆
source

幸运的是，您发布后不久就需要此文件。:)

— mcandre 2011年

5

如果画布小于容器，则此方法不起作用。

— SystemicPlural 2015年

8

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

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

如果您想使其垂直居中，则canvas元素需要绝对定位：

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

— 康克雷特
source

5

以上答案仅在您的画布与容器的宽度相同时才有效。

无论以下情况，此方法均有效：

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

展开摘要

— 系统复数
source

3

使用此代码：

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

— Keyur Patel
source

2

我遇到了同样的问题，因为我有许多宽度不同的图片，而这些图片仅包含高度信息。设置宽度可以使浏览器拉伸和压缩图片。我通过使文本行居中在image_tag行之前居中来解决此问题（也摆脱了float：left;）。我希望文本保持对齐，但这是我可以容忍的一个小麻烦。

— MDM
source

0

添加text-align: center;到父标签的<canvas>。而已。

例：

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

— 拉吉·亚达夫（Raj Yadav）
source

这很简单，然后使用CSS

— Clifton Avil D'Souza