如何在全寬 Div 內水平（和垂直）居中按鈕？

在100% 寬度的Div 中將按鈕居中

CSS 中的一個常見需求是將按鈕在跨越整個div 的居中頁面的寬度。為了實現這一點，有多種方法可用。

一種方法是使用 Flexbox。透過將div的display屬性設定為flex並添加justify-content: center和align-items: center，div就成為flexbox容器，其子元素垂直和水平居中。

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  /* Other styles */
}

如果垂直對齊沒有必要，您可以簡單地使用 justify-content: center。

#wrapper {
  display: flex;
  justify-content: center;
}
button {
  /* Other styles */
}

對於更傳統的方法，您可以將按鈕的 margin 屬性設為 auto。這將使按鈕在 div 內水平居中。

button {
  margin: 0 auto;
  /* Other styles */
}

或者，您可以將 div 的 text-align 屬性設為居中。這將使 div 中的所有元素（包括按鈕）居中。

div {
  text-align: center;
}
button {
  /* Other styles */
}

這些只是將按鈕在 div 中居中的幾種方法。最佳方法將取決於佈局的特定要求。

以上是如何在全寬 Div 內水平（和垂直）居中按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！