如何将Canvas居中对齐到按钮内部？

嘿，要把Canvas居中放在按钮里其实挺简单的，核心靠CSS调整按钮布局就行，我给你两种实用的实现方式：

方法一：使用Flexbox布局（推荐） #

Flexbox是现在布局的首选方案，能轻松实现水平+垂直双居中，兼容性也很棒。只需要给按钮设置几个flex属性，内部的Canvas就会自动居中啦。

完整代码示例：

<style>
  .canvas-button {
    /* 开启flex布局 */
    display: flex;
    /* 水平方向居中 */
    justify-content: center;
    /* 垂直方向居中 */
    align-items: center;
    /* 给按钮加些内边距，让视觉效果更舒服 */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
</style>

<button class="canvas-button">
  <canvas id="myCanvas" width="100" height="100"></canvas>
</button>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 100);
</script>

方法二：用文本对齐+垂直对齐实现 #

如果不想用Flexbox，也可以通过传统的文本属性来搞定：

<style>
  .canvas-button {
    /* 让内部元素水平居中 */
    text-align: center;
    /* 设置行高，配合vertical-align实现垂直居中 */
    line-height: 140px; /* 可根据按钮实际高度调整 */
    padding: 0 20px;
    border: none;
    cursor: pointer;
  }
  #myCanvas {
    /* 让Canvas垂直居中对齐 */
    vertical-align: middle;
  }
</style>

<button class="canvas-button">
  <canvas id="myCanvas" width="100" height="100"></canvas>
</button>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(20, 20, 150, 100);
</script>

两种方法都能达到你想要的效果，个人更推荐第一种Flexbox的方式，布局逻辑更清晰，适配不同尺寸的按钮也更省心~

备注：内容来源于stack exchange，提问作者Justin Thyme