Html 如何在html5中居中画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5127937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center canvas in html5
提问by jorgen
I've been searching for a solution for a while now, but haven't found anything. Maybe it's just my search terms. Well, I'm trying to make the canvas center according to the size of the browser window. The canvas is 800x600. And if the window gets below 800x600, it should resize as well(but that's not very important at the moment)
我一直在寻找解决方案一段时间了，但没有找到任何东西。也许这只是我的搜索词。好吧，我正在尝试根据浏览器窗口的大小使画布居中。画布为 800x600。如果窗口低于 800x600，它也应该调整大小（但目前这不是很重要）
回答by Marco Luglio
Give the canvas the following css style properties:
为画布提供以下 css 样式属性：
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
}
Edit
编辑
Since this answer is quite popular, let me add a little bit more details.
由于这个答案很受欢迎，让我添加更多细节。
The above properties will horizontallycenter the canvas, div or whatever other node you have relative to it's parent. There is no need to change the top or bottom margins and paddings. You specify a width and let the browser fill the remaining space with the auto margins.
上述属性将使画布、div 或任何其他相对于其父节点的节点水平居中。无需更改顶部或底部边距和填充。您指定宽度并让浏览器使用自动边距填充剩余空间。
However, if you want to type less, you could use whatever css shorthand properties you wish, such as
但是，如果您想减少输入，您可以使用您希望的任何 css 速记属性，例如
canvas {
padding: 0;
margin: auto;
display: block;
width: 800px;
}
Centering the canvas verticallyrequires a different approach however. You need to use absolute positioning, and specify both the width and the height. Then set the left, right, top and bottom properties to 0 and let the browser fill the remaining space with the auto margins.
然而，垂直居中画布需要不同的方法。您需要使用绝对定位，并指定宽度和高度。然后将 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;
}
The canvas will center itself based on the first parent element that has positionset to relativeor absolute, or the body if none is found.
画布将根据position设置为relative或的第一个父元素居中absolute，如果没有找到，则以主体为中心。
Another approach would be to use display: flex, that is available in IE11
另一种方法是使用display: flex，在 IE11 中可用
Also, make sure you use a recent doctype such as xhtml or html 5.
另外，请确保您使用最新的文档类型，例如 xhtml 或 html 5。
回答by jinmichaelr
You can give your canvas the ff CSS properties:
您可以为画布提供 ff CSS 属性：
#myCanvas
{
display: block;
margin: 0 auto;
}
回答by JoeCianflone
Just center the div in HTML:
只需在 HTML 中居中 div：
#test {
width: 100px;
height:100px;
margin: 0px auto;
border: 1px solid red;
}
<div id="test">
<canvas width="100" height="100"></canvas>
</div>
Just change the height and width to whatever and you've got a centered div
只需将高度和宽度更改为任何值即可获得居中的 div
回答by Konkret
To center the canvas element horizontally, you must specify it as a block level and leave its left and right margin properties to the browser:
要水平居中画布元素，您必须将其指定为块级别并将其左右边距属性留给浏览器：
canvas{
margin-right: auto;
margin-left: auto;
display: block;
}
If you wanted to center it vertically, the canvas element needs to be absolutely positioned:
如果你想垂直居中，画布元素需要绝对定位：
canvas{
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
If you wanted to center it horizontally and vertically, do:
如果您想将其水平和垂直居中，请执行以下操作：
canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For more info visit: https://www.w3.org/Style/Examples/007/center.en.html
更多信息请访问：https: //www.w3.org/Style/Examples/007/center.en.html
回答by SystemicPlural
The above answers only work if your canvas is the same width as the container.
仅当您的画布与容器的宽度相同时，上述答案才有效。
This works regardless:
无论如何，这都有效：
#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>回答by Keyur Patel
Use this code:
使用此代码：
<!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>
回答by MDM
I have had the same problem, as I have pictures with many different widths which I load only with height info. Setting a width allows the browser to stretch and squeeze the picture. I solve the problem by having the text line just before the image_tag line centred (also getting rid of float: left;). I would have liked the text to be left aligned, but this is a minor inconvienence, that I can tolerate.
我遇到了同样的问题，因为我有许多不同宽度的图片，我只加载了高度信息。设置宽度允许浏览器拉伸和挤压图片。我通过在 image_tag 行之前的文本行居中解决了这个问题（也摆脱了 float: left;）。我本来希望文本左对齐，但这是一个小小的不便，我可以容忍。
回答by Raj Yadav
Add text-align: center;to the parent tagof <canvas>. That's it.
添加text-align: center;到父标签的<canvas>。就是这样。
Example:
例子：
<div style="text-align: center">
<canvas width="300" height="300">
<!--your canvas code -->
</canvas>
</div>
