vue 让柱状图处于容器中间

要让一个柱状图处于容器中间，可以使用以下步骤：

1. 在容器中添加一个父元素，设置其为 display: flex; 并且设置 justify-content: center; align-items: center;，这将使其子元素在水平和垂直方向上都居中。

2. 将柱状图的宽度设置为一个固定值，例如 600px。

3. 将柱状图的左右 margin 设置为 auto，这将使其在父元素中水平居中。

以下是示例代码：

HTML:

<div class="chart-container">
  <div class="chart-parent">
    <div class="chart"></div>
  </div>
</div>

CSS:

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.chart-parent {
  width: 600px;
}

.chart {
  width: 100%;
  height: 400px;
  margin: 0 auto;
}

在这个示例中，.chart-container 是整个容器，.chart-parent 是包含柱状图的父元素，.chart 是柱状图本身。通过将 .chart 的左右 margin 设置为 auto，它就会在 .chart-parent 中水平居中。同时，由于 .chart-parent 已经设置为居中，因此柱状图也会在容器中居中。