現在的網頁設計越來越注重用戶體驗，而按鈕是用戶瀏覽網頁時最常用到的交互元素之一。但是，很多網頁設計師不知道如何將按鈕居中，這篇文章就介紹一下如何使用CSS將按鈕居中。 首先，在HTML中使用button標簽定義一個按鈕，并在按鈕中填入文本內容。如下所示：

<button>點擊按鈕</button>

接下來，我們使用CSS設置按鈕的樣式。首先，我們需要給按鈕設置寬度和高度，并使其成為一個塊級元素。這樣，按鈕的大小就不會隨著文本內容的變化而改變。代碼如下：

button {
width: 120px;
height: 40px;
display: block;
}

然后，我們需要將按鈕居中。這里有幾個方法可以做到： 1.使用margin屬性 使用margin屬性可以將按鈕居中，代碼如下：

button {
width: 120px;
height: 40px;
display: block;
margin: 0 auto;
}

2.使用text-align屬性 使用text-align屬性可以將按鈕的文本內容居中，代碼如下：

button {
width: 120px;
height: 40px;
display: block;
text-align: center;
}

3.使用flex布局 使用flex布局可以將按鈕和其他元素進行對齊和居中，代碼如下：

.container {
display: flex;
justify-content: center;
align-items: center;
}
button {
width: 120px;
height: 40px;
}

以上就是三種將按鈕居中的方法。無論你選擇哪種方法，都可以輕松將按鈕居中，并提高用戶體驗。