Cách căn giữa canvas trong HTML5

Để căn giữa (center) một canvas trong HTML5, cách phổ biến nhất là bọc canvas trong một <div> và căn giữa div đó.

Cách 1: text-align: center trên container (Đơn giản nhất)

<!DOCTYPE html>
<html>
  <body>
    <div style="text-align: center;">
      <canvas style="background-color: green; border: 1px solid #000;">
        Trình duyệt không hỗ trợ canvas.
      </canvas>
    </div>
  </body>
</html>

Canvas là inline-block theo mặc định, nên text-align: center trên cha hoạt động tốt.

Cách 2: Flexbox (Hiện đại, mạnh mẽ hơn)

<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">
  <canvas style="background: green;"></canvas>
</div>

• Căn giữa cả ngang và dọc.
• Responsive tốt trên mọi kích thước màn hình.

Cách 3: Margin auto (Cần display: block)

<canvas style="display: block; margin: 0 auto; background: green;"></canvas>

Canvas mặc định là inline, phải đặt display: block thì margin: 0 auto mới hiệu lực.

Cách 4: CSS Grid

<div style="display: grid; place-items: center; min-height: 100vh;">
  <canvas style="background: green;"></canvas>
</div>

Khuyến nghị

• Layout đơn giản, chỉ căn ngang: Cách 1 (text-align).
• Cần căn giữa cả 2 trục hoặc layout phức tạp: Cách 2 (Flexbox).
• Tránh dùng <center> (deprecated) hoặc table layout.