在 HTML 中將 div 置中是非常具有挑戰性的，尤其是水平和垂直居中。但在這篇文章中我會幫助你！

程式碼範例及說明：

假設有一個類別為 myDiv 的 div:

hello dev

現在讓我們，
使用 CSS 水平居中:
要讓該 div 水平居中，我們可以使用以下 CSS 程式碼：

.myDiv {
  padding: 0 100%;
}

在此 CSS 程式碼中 padding: 0 100%;將 X 軸填滿設定為 100%（全螢幕寬度）以使 div 水平居中。

使用 CSS 垂直居中:
為了讓這個 div 垂直居中，我們可以使用這個 CSS 程式碼：

.myDiv {
  padding: 100% 0;
}

在此 CSS 程式碼中填入：100% 0;將 Y 軸填滿設定為 100%（全螢幕高度）以使 div 垂直居中。

使用 CSS 水平和垂直居中：
現在讓我們使用 CSS 將其垂直和水平居中。
讓我們使用這段程式碼：

.myDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100% 0;
}

這段程式碼中顯示：flex;將顯示模式設為 Flexbox，這對於其工作非常重要。然後 justify-content: center;將內容對齊並居中並對齊項目：中心；將項目居中對齊。他們一起工作使 div 水平居中。最後填充：100%0；向 Y 軸（全螢幕高度）添加 100% 填充，以使 div 像以前一樣垂直居中。將所有內容放在一起，它們將 div 垂直和水平居中。

這一切都是關於使用 CSS 居中 div，了解更多

使用 TailwindCSS:

是的，我不能不告訴你使用 TailwindCSS 就結束這篇文章。這是我最喜歡的框架，因為它對初學者幫助很大。

讓我們使用 TailwindCSS 將 div 置中，
水準：
使用 TailwindCSS 將 div 水平居中可以透過使用以下程式碼來完成：

hello dev

在此程式碼中，TailwindCSS 類別 flex 將顯示設定為 flexbox，並且 items-center 使專案水平居中。

垂直：
使用 TailwindCSS 使 div 垂直居中可以透過使用以下程式碼來完成：

hello dev

在此程式碼中，TailwindCSS 類別 h-screen 使用全螢幕高度設定 div，類別 flex 將顯示設定為 Flexbox，而 items-center 將專案居中。

垂直與水平：

hello dev

在此程式碼中，h-screen 類別使 div 使用全螢幕高度，flex 類別將顯示設定為 Flexbox，items-center 將專案居中， justify-center 將專案對齊到中心。將所有內容放在一起使 div 垂直和水平居中。

這就是使用 TailwindCSS 居中 div 的全部內容，了解更多

結論：

div 居中可以讓網站中的元素脫穎而出，這就是 HTML div 居中的方式。

確保練習而不是完全依賴記憶屬性。祝你今天過得愉快 ：）

大家好，我是學生，我喜歡程式設計。如果我的文章對您有幫助並且您想捐贈，那麼謝謝，因為它將支持我的教育並幫助我實現我的目標！ 捐贈 Nabir14