vuetify의 중앙 부동 버튼

vuetify의 중앙 부동 버튼

화면 중앙에 'BUY NOW' 버튼이 오도록 가운데를 맞추려고 하는데 작동이 안 돼.

나는 3개의 플렉스 아이템을 만들어 중간 플렉스 버튼에 추가했다.하지만 이것도 효과가 없었다.

나는 공간과 공간 사이를 정당화하려고 했지만 운이 없었다.

<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>

여기 코디펜의 링크가 있다.

제발 도와주세요.

버튼이 이렇게 가운데에 정확히 위치해야 해

버튼에 일부 css 추가:

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

https://codepen.io/anon/pen/Ygrrox

나는 캡션이 있는 플렉스 박스 위의 또 다른 플렉스 박스로 버튼을 옮겼다. text-xs-center텍스트를 가로로 이동하고align-center텍스트를 수직으로 이동한다.코드펜에서 나의 변화를 볼 수 있다 :)

<v-flex text-xs-center align-center>
    <v-btn
        color="pink"
        dark
        absolute
    > buy now
</v-flex>

너는 클래스를 사용할 수 있다.text-xs-center단추를 가로로 가운데 맞춤

<v-card class="text-xs-center">
    <v-btn
      color="pink"
      dark
      absolute
      top
    > buy now </v-btn>
</v-card>

참조URL: https://stackoverflow.com/questions/55092567/center-floating-button-in-vuetify