canvas画布水平居中

canvas画布水平居中

canvas 画布是html5新增元素，且是行内块元素，要实现它的水平居中可以有以下两种实现思路

• 将它设置为块元素

• 给一个父级元素包裹它,通过改变父级元素来改变它

实现方式一、将canvas元素设置为块元素，通过设置margin实现水平居中

<div class="outer">
  <canvas id="canvas" ></canvas>
</div>

.outer {
  background: cadetblue;
  padding: 20px;
}
 canvas {
   display: block;
   margin: auto;
   border: 1px solid pink;
   border-radius: 16px;
 }

实现方式二、给canvas元素包裹一个父级元素，通过修改父级元素，使canvas元素水平居中

<div class="outer">
  <canvas id="canvas" ></canvas>
</div>

.outer {
  background: cadetblue;
  padding: 20px;
  text-align: center;
}
canvas {
  border: 1px solid pink;
  border-radius: 16px;
}

通过以上两种方式都可以实现canvas画布的水平居中