Vue步进器组件应用justify-content:center后仍左对齐问题

问题出在v-for循环的每个step容器都加了full-width类，这个类设置了width:100%，导致每个step项单独占满一行宽度，外层的justify-content:center完全起不到居中作用。

修复步骤： #

• 移除v-for所在<div>的full-width类，让每个step项只占用自身内容宽度
• 外层的justify-center样式会自动生效，让整个步进器居中

修改后的完整代码： #

<template>
  <div class="flex justify-center full-width" style="border: 1px">
    <div class="flex no-wrap justify-center full-width">
      <div
        class="flex items-center q-pb-xl"
        v-for="steps in data"
        :key="steps.key"
      >
        <div
          class="stepper-circle"
          :class="{
            'stepper-circle--filled': currentStep === steps.key,
            'stepper-circle--unfilled': currentStep < steps.key,
          }"
        >
          <q-icon
            v-if="currentStep > steps.key"
            name="check"
            color="white"
            size="xs"
          />
          <div
            v-else
            class="stepper-circle__dot"
            :class="{
              'stepper-circle__dot--active': currentStep === steps.key,
            }"
          />
          <div
            class="stepper-circle__label"
            :class="{ 'text-grey fw3': currentStep < steps.key }"
          >
            {{ steps.name }}
          </div>
        </div>
        <div
          :class="{
            'stepper-separator': steps.key < data.length,
            'stepper-separator--active': steps.key < currentStep,
          }"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Stepper",

  data() {
    return {
      currentStep: 1,
      data: [
        {
          name: "Step 1",
          key: 1,
        },
        {
          name: "Step 2",
          key: 2,
        },
        {
          name: "Step 3",
          key: 3,
        },
      ],
    };
  },

  methods: {
    getSeparatorWidth(stepKey) {
      const totalSteps = this.data.length - 1;
      const widthPercentage = (100 / totalSteps) * stepKey;
      return widthPercentage;
    },
  },
};
</script>
<style lang="scss" scoped>
.items-center {
  align-items: center;
}
.full-width {
  width: 100%;
}
.justify-center {
  justify-content: center;
}
.flex {
  display: flex;
}
.stepper-separator {
  height: 2px;
  background: #d1d5db;
  transition: width 2s;
  flex-grow: 1;
}

.stepper-separator--active {
  background: #08104d;
}

.stepper-circle {
  position: relative;
  width: 32px;
  height: 32px;
  border: 2px solid #08104d;
  border-radius: 50%;
  background-color: #08104d;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  line-height: 15px;
}

.stepper-circle__dot {
  background: #d1d5db !important;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.stepper-circle__dot--active {
  background: #08104d !important;
}

.stepper-circle__label {
  position: absolute;
  top: 45px;
  font-size: 10px;
  color: #08104d;
  font-weight: 600;
  display: flex;
  white-space: normal;
  width: 80px;
  justify-content: center;
  text-align: center;
}

.stepper-circle--filled {
  background: rgb(255, 255, 255) !important;
  border: 2px solid #08104d !important;
}

.stepper-circle--unfilled {
  background: white !important;
  border: 2px solid #d1d5db !important;
}
</style>

内容的提问来源于stack exchange，提问作者power-cut