使用 CSS 居中 HTML div

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

程式碼範例及說明：

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

<div class="myDiv">hello dev</div>

現在讓我們，
使用 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 水平居中可以透過使用以下程式碼來完成：

<div class="flex items-center">hello dev</div>

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

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

<div class="h-screen flex items-center">hello dev</div>

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

垂直與水平：

<div class="h-screen flex items-center justify-center">hello dev</div>

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

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

結論：

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

一定要多練習，不要完全依賴記憶屬性。祝你有美好的一天:)

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

以上是使用 CSS 居中 HTML div的詳細內容。更多資訊請關注PHP中文網其他相關文章！