vuejs2 - vuetify中的中心 float 按钮

Question

我试图将“立即购买”按钮置于屏幕中间，但我无法让它工作。

我创建了 3 个 flex 项目并将按钮添加到中间的 flex 中。然而这也不起作用。

我尝试使用 justify-space-around 和 justify-space-between 但没有运气。

<v-flex xs12>
  <v-layout row >
    <v-flex ></v-flex>
    <v-flex pt-2>
      <v-card>
          <v-btn
            color="pink"
            dark
            absolute
            top
          >
            BUY NOW
          </v-btn>
      </v-card>
    </v-flex>
    <v-flex ></v-flex>
  </v-layout>
</v-flex>

这是 codepen 的链接

请帮忙。

我需要按钮正好位于中间，如下所示:

Answer 1

向按钮添加一些 css:

<v-btn
  color="pink"
  dark
  absolute
  top
  :style="{left: '50%', transform:'translateX(-50%)'}"
>