HTML5 Canvas畫布居中失效？margin:0 auto不生效的原因與解決

問題現象

設置canvas元素margin: 0 auto無法水平居中，但單獨用margin-left/margin-top卻能定位。

根本原因

canvas默認是行內元素（inline），而margin: 0 auto僅對塊級元素（block）且具有明確寬度時生效。

解決方案

/* 方法1：轉為塊級元素 */
canvas {
    display: block;
    margin: 0 auto;
}

/* 方法2：Flex佈局（推薦） */
.container {
    display: flex;
    justify-content: center;
}

/* 方法3：Grid佈局 */
.container {
    display: grid;
    place-items: center;
}

深度解析

最佳實踐

1. 習慣給canvas設置display: block
2. 父容器使用Flex/Grid實現多方向居中
3. 避免混用margin定位與Flex佈局

記住：行內元素不支持margin:0 auto，這是CSS基礎盒模型特性，而非Canvas特有問題。