如何使用 CSS 將按鈕在 Div 中水平和垂直居中？

將按鈕在 Div 中居中

在 CSS 中，有多種技術可以將內容在父元素中居中。讓我們來探索在 div 中水平居中按鈕的最常見方法。

使用 Flexbox（現代方法）

Flexbox 是一個 CSS 佈局模組，提供靈活且響應式的功能佈局。使用 Flexbox將按鈕垂直和水平居中：

使用固定寬度和邊距（傳統方法）

如果按鈕具有固定寬度且父級div的寬度是固定的或100%，可以使用邊距居中it:

水平居中的替代方法

• Text-align:設定父級的text-align屬性分割到"center."
• margin-left: 計算按鈕寬度的一半，並將其設定為左側的負邊距。

垂直居中

要使按鈕垂直居中，請使用相對定位並將 top 屬性設為 50%。然後，在按鈕本身上設定position:relative：

範例程式碼

下面是一個範例HTML 和CSS 程式碼，用於將按鈕置於div中：

這將使「Hello」按鈕在父級中水平和垂直居中分區

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