在設計網頁時，經常需要使用按鈕來引導用戶進行各種操作。但是，如何讓這些按鈕能夠在視覺上居中顯示，卻讓不少新手感到頭痛。下面，我們來探討一下如何使用 CSS 讓按鈕居中顯示。 首先，我們需要在 HTML 文件中添加一個按鈕元素，如下所示：

<button class="center">點擊按鈕</button>

在這里，我們為按鈕添加了一個 class 名稱“center”，這是為了方便在 CSS 樣式表中進行樣式設置。接下來，在 CSS 樣式表中，我們需要使用以下代碼來設置按鈕的樣式：

.center {
display: block;
margin: 0 auto;
}

在這里，我們通過為“center” class 添加“display: block”屬性，使其變成塊級元素，并以整個行的方式顯示；接著，通過設置“margin: 0 auto”屬性，使按鈕在水平方向上與包含塊保持居中對齊。 如果我們想讓按鈕在垂直方向上也居中對齊，可以嘗試以下代碼：

.center {
display: flex;
justify-content: center;
align-items: center;
}

在這里，我們將“display”屬性設置為“flex”，使用“justify-content: center”屬性將按鈕在水平方向上居中，使用“align-items: center”屬性將按鈕在垂直方向上居中。 通過上述方法，我們可以輕松地將按鈕居中顯示，不必擔心按鈕樣式不美觀或不符合設計要求的問題。