CSS中按鈕如何實現上下居中顯示 在網站設計過程中，按鈕是非常常見的元素之一。但是，有時候我們會發現按鈕并不總是垂直居中顯示，這會影響網站的外觀和用戶體驗。下面，我們將介紹一些方法來讓按鈕在CSS中實現垂直居中的效果。 方法一：使用line-height方法 我們可以使用CSS中的line-height屬性來實現按鈕垂直居中。首先，我們需要知道按鈕的高度，然后將line-height設置為該高度的數值。例如，如果按鈕高度為50px，我們可以將line-height設置為50px來實現垂直居中。下面是CSS代碼示例： pre{ background-color:#f7f7f7; padding:10px; } p{ font-size:18px; font-weight:bold; margin-bottom:10px; } .button{ display:inline-block; width:150px; height:50px; line-height:50px; text-align:center; background-color:#007fff; color:#fff; font-size:16px; border:none; cursor:pointer; } 方法二：使用flexbox方法 另一種常用的實現垂直居中的方法是使用flexbox。這種方法比line-height更靈活，能夠在不同的頁面布局中使用。下面是CSS代碼示例： .container{ height:300px; display:flex; align-items:center; justify-content:center; } .button{ width:150px; height:50px; text-align:center; background-color:#007fff; color:#fff; font-size:16px; border:none; cursor:pointer; } 在這個例子中，我們將容器的display屬性設置為flex，并使用align-items和justify-content屬性來將子元素垂直和水平居中。.container和.button的CSS代碼可以根據需要進行調整。 總結 在CSS中實現按鈕垂直居中的方法有很多種。以上方法是常用的兩種，可以根據不同的頁面布局和需要選擇使用。我們希望這些方法能幫助您在設計網站時更好地控制按鈕的外觀和布局。