javascript - Chart.js Canvas : can't center it

Question

我正在尝试在 <canvas> 中显示 Chart.js 图表，并且此 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;
}

JavaScript

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

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

Screenshot of the apparent margin

谁能指出我的问题？非常感谢:-)

Answer 1

把它放在你的 CSS 中

canvas{
    margin: 0 auto;
    }