如何将v-btn放在v卡上居中并将其放在卡边缘上？

Question

我想将按钮相对于v-card元素居中，然后将其放在其底部边缘。

现在，我有两个部分解决方案可以单独执行这些操作。

以下样式将我的v-btn正确放置在v-card的边缘：

.middle {
   position: absolute;
}

在边缘：

然后按照以下样式在v卡中居中显示

：

.middle {
   display: block;
   margin: auto;
}

居中：

但是，当组合按钮不再居中时。如何将这两种效果与CSS结合在一起？

在我的v-card下面，我有 vuetify 时间轴元素，只想为添加其原点和标题的时间轴元素添加一个漂亮的按钮：）

Answer 1

将:style="{left: '50%', transform:'translateX(-50%)'}"添加到<v-btn>