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

Div 元素中按鈕居中的綜合指南

在網頁設計領域，精確定位元素的任務至關重要。例如，將按鈕置於 div 中可以顯著增強網站的視覺吸引力和使用者體驗。

問題：

要實現所需的對齊方式，web開發者經常會遇到以下問題：

如何將按鈕置於跨越整個寬度的div 中(_100%_) 的父容器？

答案：

現代方法：利用Flexbox

現代瀏覽器擁有Flexbox

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

現代瀏覽器擁有Flexbox 的強大功能，這是專為靈活佈局而設計的CSS 模組。 Flexbox 允許沿著水平軸和垂直軸精確對齊元素，使其成為居中按鈕的理想解決方案。

傳統方法：利用定位和邊距

button {
  height: 20px;
  width: 100px;
  margin: -20px -50px;
  position: relative;
  top: 50%;
  left: 50%;
}

在可能不完全支援 Flexbox的瀏覽器中或需要固定尺寸時，另一種方法涉及使用定位和

其他選項

• 僅對於水平居中，請考慮以下CSS屬性：
• margin: 0 auto;

文字對齊：居中；應用於父div

結論：

由於Flexbox 和傳統對齊技術的出現，div 中的居中按鈕已成為一項簡單的任務。選擇最適合您的特定瀏覽器支援和佈局要求的方法，確保您的按鈕不僅實用，而且美觀。

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