Chart.js 画布：无法居中

Question

我正在尝试<canvas>在<div>. 我希望图形具有响应性，固定高度为 700 像素，宽度为页面宽度的 80%。最重要的是，我希望这个图表在页面内居中！我的代码在下面

HTML

<div class='chartContainer'>
    <canvas id="canvas"></canvas>
</div>

CSS

.chartContainer{
    text-align: center;
}

canvas{
    width: 80% !important;
    height: 700px !important;
    margin: 0;
}

爪哇脚本

new Chart(canvasContext, {
    type: 'line',
    data: {
        labels: hourLabels,
        datasets: dataToRender
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
});

我的问题是：我无法将它居中，它<div>占据整个页面，但<canvas>似乎应用了边距，即使它没有出现在 DOM 控制台内...

表观边距的屏幕截图

谁能指出我的问题？非常感谢 ：-）

Answer 1

把它放在你的 CSS 中

canvas{
    margin: 0 auto;
    }