1. 水平居中
1.1 使用 text-align
将 canvas
元素作为块级或行内块级元素,通过父容器的文本对齐属性进行水平居中。
示例
<div style="text-align: center;">
<canvas width="300" height="150"></canvas>
</div>
优缺点
- 优点:简单易用,适用于小型布局。
- 缺点:仅能实现水平居中。
1.2 使用 flexbox
通过父容器设置 display: flex
,并让子元素水平居中。
示例
<div style="display: flex; justify-content: center;">
<canvas width="300" height="150"></canvas>
</div>
优缺点
- 优点:灵活,可扩展性强。
- 缺点:需要额外的容器。
2. 垂直居中
2.1 使用 flexbox
设置父容器为弹性盒模型,并使用 align-items: center
。
示例
<div style="display: flex; align-items: center; height: 100vh;">
<canvas width="300" height="150"></canvas>
</div>
优缺点
- 优点:简单易用。
- 缺点:要求父容器有明确的高度。
2.2 使用 position
和 transform
将 canvas
绝对定位到父容器的中心。
示例
<div style="position: relative; height: 100vh;">
<canvas width="300" height="150" style="position: absolute; top: 50%; transform: translateY(-50%);"></canvas>
</div>
优缺点
- 优点:无需依赖
flexbox
,支持现代浏览器。 - 缺点:样式较复杂。
3. 完全居中
3.1 使用 flexbox
完全居中
通过设置 justify-content
和 align-items
,让元素在水平和垂直方向都居中。
示例
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<canvas width="300" height="150"></canvas>
</div>
3.2 使用 position
和 transform
通过绝对定位和偏移,将 canvas
居中。
示例
<div style="position: relative; height: 100vh;">
<canvas width="300" height="150" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></canvas>
</div>
3.3 使用 CSS Grid
通过 CSS 网格布局让元素完全居中。
示例
<div style="display: grid; place-items: center; height: 100vh;">
<canvas width="300" height="150"></canvas>
</div>
优缺点
- 优点:语义清晰,代码简洁。
- 缺点:需要浏览器支持 CSS Grid(现代浏览器均支持)。
4. 自动调整大小居中
如果 canvas
大小会根据窗口变化调整,可以通过 flexbox
或 position
配合百分比实现动态居中。
示例
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<canvas style="width: 50%; height: 50%;"></canvas>
</div>