Vue中的button是一種常用的元素，我們經常需要在頁面中使用它來實現交互功能。但是，當我們在頁面中放置button時，有時候會遇到居中對齊的問題。本文將介紹一些方法，來幫助您在Vue中居中對齊button。

方法一：使用CSS的margin屬性

<template>
<div class="center">
<button>Click Me</button>
</div>
</template>
<style>
.center {
display: flex; /*開啟flex布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
height: 100%; /*設置高度*/
}
button {
margin: auto; /*設置margin為auto實現水平垂直居中*/
}
</style>

方法二：使用CSS的grid屬性

<template>
<div class="center">
<button>Click Me</button>
</div>
</template>
<style>
.center {
display: grid; /*開啟grid布局*/
place-items: center; /*居中對齊*/
height: 100%; /*設置高度*/
}
</style>

以上就是在Vue中實現button居中對齊的方法，希望可以幫助到您。