版权声明：来自chirs，未经同意不得转载 https://blog.csdn.net/junmo_xiao/article/details/82663500
canvas 画布水平居中
方式一：利用display 属性，在style 样式中设置display的值为block，然后设置margin:0 auto;即可实现水平局中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
display: block;
margin: 0 auto;
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>效果如下图所示：
方式二：在canvas外面包裹一个盒子div ，在style样式设置盒子的宽度与canvas的宽度相等，盒子margin：0 auto；水平居中，既可以实现canvas画布的水平居中，代码如下，效果图略。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
margin:0 auto;
width:400px;
}
canvas{
/*display: block;
margin: 0 auto;*/
border:1px solid red;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="400px" height="400px"></canvas>
</div>
</body>