使用 CSS 使 div 居中的七種最快方法

本 CSS 指南探討了水平和垂直居中 div 的七種有效方法，檢查了每種方法的優點和缺點。讓我們潛入吧！

方法一：Flexbox

最簡單的方法是利用 Flexbox。 將 display: flex、justify-content: center（水平居中）和 align-items: center（垂直居中）應用於父容器。

<code class="language-css">.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

Flexbox 優異的適應性； 寬度和高度規範不是強制性的。它對於將多個元素集中在單一容器中特別有效。

方法二：margin: auto

這種常見技術使用margin: auto。 然而，它也有限制：

• 需要元素的定義寬度。
• 元素必須有區塊或表格顯示，且不能有 position: fixed 或 position: absolute。
• 不支援垂直對齊。

<code class="language-css">.box {
  width: 200px;
  height: 100px;
  margin: auto;
  background-color: #2196f3;
  color: white;
  text-align: center;
  line-height: 100px;
}</code>

因此，它的適用性是特定場景的。

方法三：內嵌塊顯示

此方法結合了父 div 上的 text-align: center 和子 div 上的 display: inline-block。這使得子 div 的行為類似於內聯元素，透過父級的文字對齊方式實現水平居中。

<code class="language-css">.container {
  text-align: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  display: inline-block;
  background-color: #ff9800;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

與 margin: auto 不同，不需要定義寬度，但不支援垂直居中。

方法 4：2D 轉換

使用 2D 變換提供了一個強大的解決方案。將元素的 position 設定為 absolute，然後設定 top: 50% 和 left: 50%。最後，根據元素的尺寸應用 transform: translate(-50%, -50%) 進行偏移。

<code class="language-css">.container {
  position: relative;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e91e63;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

此方法可讓 div 保持居中，無論其他元素如何，都非常適合疊加。 但是，需要寬度和高度定義。

方法五：網格佈局

CSS 網格提供了一個高效率的方法：

• 將父容器設定為display: grid。
• 使用 place-items: center 進行水平和垂直居中。

<code class="language-css">.parent {
  display: grid;
  place-items: center;
}</code>

優點：不需要寬度/高度規格；對多種元素有效。 缺點：需要現代瀏覽器支援（儘管得到廣泛支援）。

方法六：表格展示

這種舊方法在父級上使用 display: table，在子級上使用 display: table-cell 和 vertical-align: middle。 text-align: center 處理水平對齊。

<code class="language-css">.parent {
  display: table;
  width: 100%;
  height: 100%;
}
.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}</code>

方法七：位置相對轉換

方法 4 的變體，在父級上使用 position: relative，在子級上使用 position: absolute 以及 top: 50%、left: 50% 和 translate(-50%, -50%)。

<code class="language-css">.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  font-size: 20px;
}</code>

這在處理巢狀元素時提供了更多控制。

結論

本指南全面概述了 div 居中技術。 最佳方法取決於具體情況和所需的控制等級。 明智地選擇！ 考慮在 LinkedIn、Bluesky 和Medium 上連接以獲取更多內容。

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