blocks|key|771541|text|您可以为画布提供ff+CSS属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|771542|#myCanvas
{
++++display:+block;
++++margin:+0+auto;
}|code-block|syntax|javascript|771543|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can give your canvas the ff CSS properties:</p>

<pre><code>#myCanvas
{
    display: block;
    margin: 0 auto;
}
</code></pre>


blocks|key|771491|text|只需在HTML中将div居中即可：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|771492|++#test+{
+++++width:+100px;
+++++height:100px;
+++++margin:+0px+auto;
+++++border:+1px+solid+red;
+++}


<div+id="test">
+++<canvas+width="100"+height="100"></canvas>
</div>|code-block|syntax|javascript|771493|只需将高度和宽度更改为任意值，就会得到一个居中的div|771494|http://jsfiddle.net/BVghc/2/|offset|length|771495|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>Just center the div in HTML:</p>

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


&lt;div id="test"&gt;
   &lt;canvas width="100" height="100"&gt;&lt;/canvas&gt;
&lt;/div&gt;
</code></pre>

<p>Just change the height and width to whatever and you've got a centered div</p>

<p><a href="http://jsfiddle.net/BVghc/2/" rel="noreferrer">http://jsfiddle.net/BVghc/2/</a></p>


blocks|key|986141|text|要水平居中画布元素，必须将其指定为块级别，并将其左边界和右边界属性保留给浏览器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986142|canvas{
++++margin-right:+auto;
++++margin-left:+auto;
++++display:+block;
}|code-block|syntax|javascript|986143|如果想要垂直居中，画布元素需要绝对定位：|986144|canvas{
++++position:+absolute;
++++top:+50%25;
++++transform:+translate(0,+-50%25);++++++++++++++
}|986145|如果要将其水平和垂直居中，请执行以下操作：|986146|canvas{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++transform:+translate(-50%25,+-50%25);+++++++++++++++
}|986147|有关更多信息，请访问：https://www.w3.org/Style/Examples/007/center.en.html|offset|length|986148|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/Style/Examples/007/center.en.html^0|0|0|0|0|0|0|B|1G|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>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:</p>

<pre><code>canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}
</code></pre>

<p>If you wanted to center it vertically, the canvas element needs to be absolutely positioned:</p>

<pre><code>canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}
</code></pre>

<p>If you wanted to center it horizontally and vertically, do:</p>

<pre><code>canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}
</code></pre>

<p>For more info visit: <a href="https://www.w3.org/Style/Examples/007/center.en.html" rel="noreferrer">https://www.w3.org/Style/Examples/007/center.en.html</a></p>


blocks|key|986083|text|只有当画布的宽度与容器的宽度相同时，上述答案才有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986084|无论如何，它都能正常工作：|986085|​|986086|#container+{
++width:+100px;
++height:100px;
++border:+1px+solid+red;
++
++
++margin:+0px+auto;
++text-align:+center;
}

#canvas+{
++border:+1px+solid+blue;
++width:+50px;
++height:+100px;
++
}|code-block|syntax|javascript|986087|<div+id="container">
++<canvas+id="canvas"+width="100"+height="100"></canvas>
</div>|986088|986089|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>The above answers only work if your canvas is the same width as the container.</p>

<p>This works regardless:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|986094|text|使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986095|<!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>|code-block|syntax|javascript|986096|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use this code:</p>

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

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

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|771532|text|我也有同样的问题，因为我有许多不同宽度的图片，我只加载高度信息。设置宽度允许浏览器拉伸和挤压图片。我通过将文本行放在浮动行之前居中解决了这个问题(也去掉了image_tag+:+left;)。我希望文本左对齐，但这是一个很小的不便，我可以容忍。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|771533|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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.</p>


blocks|key|771637|text|使用网格？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|771638|​|771639|const+canvas+=+document.querySelector('canvas');+
const+ctx+=+canvas.getContext('2d');+
ctx.fillStyle+=+"#FF0000";
ctx.fillRect(0,+0,+canvas.width,+canvas.height);|code-block|syntax|javascript|771640|body,+html+{
++++height:+100%25;
++++width:+100%25;
++++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;
}|771641|<html>
++<body>
++++++++<canvas></canvas>
++</body>
</html>|771642|771643|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Using grid?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.querySelector('canvas'); 
const ctx = canvas.getContext('2d'); 
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
        &lt;canvas&gt;&lt;/canvas&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>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)</p>


How to center canvas in html5

我已经寻找了一段时间的解决方案，但没有找到任何东西。也许只是我的搜索词。嗯，我正试着根据浏览器窗口的大小来使画布居中。画布大小为800x600。如果窗口小于800x600，它也应该调整大小(但目前这并不是很重要)

问如何在html5中将画布居中
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html5中将画布居中EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html5中将画布居中
EN