如何使用 CSS 將 DIV 置中 [5 種快速方法]

如果您曾經開始利用自己的編碼技能建立項目，那麼您可能面臨過將頁面上的元素居中的挑戰。問題“如何使 div 居中？”幾乎每個 Web 開發人員都會遇到這種情況。

本部落格將探討使用 CSS 使元素居中的簡單方法。從基本方法到現代技術，我們將介紹如何水平和垂直居中元素。每種方法都將透過簡單的範例進行解釋，以便您可以準確地了解其工作原理。

無論您是 CSS 新手還是需要快速複習，本指南都將幫助您掌握在網頁上居中元素的藝術。讓我們開始吧！

什麼是 DIV？

div或分區是一種基本的 HTML 元素，可作為對網頁上其他元素進行分組的容器。

只需將其想像為一個盒子，您可以使用它來組織文字、圖像或其他元素等內容。 Div 對於網頁內容的結構和樣式至關重要，可以讓網頁更有條理、更具視覺吸引力。

為什麼要考慮將 Div 居中？

從使用者體驗的角度來看，將 div 置中非常重要。但這對 Web 開發人員來說可能是一個樣式挑戰，因為它可以大大改善網頁的外觀和佈局。

這就是為什麼居中很重要：

• 提高可讀性和美觀性：將內容居中可以使其在視覺上更具吸引力，並且更容易讓使用者專注於關鍵元素，例如按鈕、表單或圖像。
• 響應式設計：當您的佈局適應不同的螢幕尺寸時，居中有助於確保您的內容保持平衡，並且在從桌上型電腦到智慧型手機的所有裝置上看起來都不錯。
• 突出顯示關鍵元素：居中是吸引人們注意重要部分或號召性用語（例如「註冊」按鈕或特色圖像）的好方法。
• 更乾淨、更專業的佈局：居中佈局通常看起來更乾淨、更精緻，為您的網站帶來更專業的感覺。

如何使用 CSS 將 DIV 置中（不同方法）

將 div 居中可以透過幾種不同的方式來完成，具體取決於您想要將其水平居中、垂直居中還是兩者都居中。以下是一些簡單的方法：

以下是使用 CSS 使 div 居中的一些最受歡迎的方法：

方法 1：如何使用自動邊距使 Div 居中

如果您是網頁設計新手，將網頁上的元素居中可能看起來很棘手，但一旦您掌握了竅門，它就非常簡單了。將div水平居中的一種經典且簡單的方法是使用自動邊距。讓我們一步一步地分解它。

1. 你需要知道什麼

若要使用自動邊距水平居中div ，請依照下列步驟操作：

• 1. 限制寬度：首先，確保您的div不會佔據其容器的整個寬度。預設情況下， div會展開以填滿整個寬度。要將其居中，您需要設定最大寬度。

• 2.使用自動邊距：左右兩側的自動邊距會將div推到中心。

這是一個簡單的例子：

html

<div class="centered-div">This is a centered div</div>

CSS

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2.為什麼要使用max-width: fit-content; ？

max-width: fit-content;規則確保div僅根據其內容佔用所需的寬度。如果您使用固定寬度（例如200px ，則當容器太窄時div可能會溢出。 fit-content動態調整div大小以適應其內容。

3. 自動保證金如何運作？

自動邊距就像飢餓的河馬，均勻地吞噬兩側的額外空間以使 div 居中。此方法會針對不同的語言自動調整，並且非常適合將單一元素居中而不影響其他元素。

當兩個邊距都設定為auto時，它們平均共享額外的空間，使div居中。

4. 使用現代快捷方式： margin-inline

您可以使用margin-inline屬性來獲得更簡潔的方法，而不是單獨設定margin-left和margin-right ：

.centered-div {

最大寬度：適合內容；

內聯邊距：自動； /* 自動將左右邊距設定為auto */

}

方法 2：如何使用 Flexbox 將 DIV 置中

Flexbox 可以輕鬆地將項目在兩個方向上居中。以下是使用 Flexbox 將單一元素居中的方法：

。

顯示：柔性；

調整內容：居中； /* 水平居中 */

對齊項目：居中； /* 垂直居中 */

}

在此範例中， .container設定為使用 Flexbox。 justify-content: center屬性使專案水平居中，而align-items: center使專案垂直居中。

需要考慮的一些要點：

水平和垂直居中： Flexbox 可以輕鬆地將項目水平和垂直居中，即使它們溢出了容器。

多個項目：Flexbox 也可以很好地處理多個項目。您可以使用flex-direction: row將項目堆疊在行中，或flex-direction : column 進行垂直堆疊。增加gap可以調整項目之間的間距。

這種方法非常靈活，常用於各種佈局中的居中元素。

方法 3：如何使 DIV 在視窗中居中

當您想要將某個元素（例如彈出視窗或橫幅）置於螢幕（視窗）中間時，可以使用 CSS 定位。這是一個簡單的方法：

1. 固定位置的基本居中

若要將元素水平和垂直居中，請使用以下步驟：

• 將位置設為固定：

– position: fixed;使元素在滾動時保持在原位。這就像將元素貼到螢幕上一樣。

• 使用插圖來錨定：

– inset: 0px;是將元素與視窗邊緣（上、右、下、左）的距離設定為 0 像素的捷徑。這會拉伸元素以填充整個螢幕。

• 約束尺寸：

– 設定width和height來定義元素的大小。

– 使用max-width和max-height確保它不會在較小的螢幕上溢出。

• 具有自動邊距的中心： – margin: auto;使元素居中。它均勻地劃分了周圍的額外空間，確保它保持居中。

範例程式碼：

。

位置：固定；

圖解：0； /* 將元素錨定到所有邊 */

寬度：12rem； /* 設定固定寬度 */

高度：5rem； /* 設定固定高度 */

最大寬度：100vw； /* 確保它不會溢出視窗寬度 */

最大高度：100dvh； /* 確保它不會溢出視口高度 */

保證金：自動； /* 使元素居中 */

}

2. 僅水平居中

如果您只想將元素水平置中（例如，底部的 cookie 橫幅），請執行以下操作：

• 位置固定：

– position: fixed;將元素保持在適當的位置。

• 錨定到邊緣：

– 使用left: 0; right: 0;將其從一側水平拉伸到另一側。

– 設定bottom: 8px;從底部邊緣定位它。

• 約束和中心：

– 設定固定寬度。

– 使用margin-inline: auto;將其水平居中。

範例程式碼：

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. 將未知尺寸的元素置中

如果您不知道元素的大小，但仍希望它居中：

• 使用適合內容：

– width: fit-content;和height: fit-content;允許元素圍繞其內容收縮。

• 應用居中：

– 結合position: fixed;和margin: auto;將其居中。

範例程式碼：

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

使用這些方法，您可以輕鬆地將元素置於視窗中，無論其大小如何。

方法 4：如何使用 CSS 網格將 DIV 置中

CSS 網格是佈局設計的強大工具，對於居中元素尤其方便。以下是如何使用 CSS 網格輕鬆地將某些內容水平和垂直居中：

1. 將單一元素居中

要將元素在其容器中居中，您可以使用 CSS 網格進行簡單設定：

• 設定網格顯示：

– display: grid;將容器變成網格。

• 使用地點內容：

– place-content: center;是使內容水平和垂直居中的快捷方式。它將justify-content （水平）和align-content （垂直）設為center 。

範例程式碼：

css

。

顯示：網格；

地點內容：中心； /* 內容水平和垂直居中 */

}

這使得元素位於其容器的中間，無論其大小如何。

2. 與Flexbox的區別

雖然 CSS Grid 可以將項目居中，但它的行為與 Flexbox 不同：

– Flexbox：根據項目的大小和容器大小將項目置中。

– CSS 網格：根據網格單元的大小將項目居中，如果未定義網格單元的大小，這可能會很棘手。

帶有百分比的網格中的範例程式碼：

css

。

顯示：網格；

地點內容：中心；

}

。

寬度：50%； /* 寬度為網格單元的50% */

高度：50%； /* 高度為網格單元的50% */

}

如果未指定網格單元格大小，則元素最終可能會小於預期。對於基本居中來說，Flexbox 通常更簡單。

3. 多個元素居中

CSS Grid 還可以處理同一單元格中的多個元素：

• 將多個元素指派給同一儲存格：

– 使用grid-row和grid-column將物品放置在同一網格單元中。

• 單元格內的中心項目：

– 新增place-items: center;將項目置於網格單元的中心。

範例程式碼：

css

。

顯示：網格；

地點內容：中心； /* 使網格單元居中 */

地點項目：中心； /* 將儲存格中的項目置中 */

}

。

網格行：1；

網格列：1； /* 所有元素都放在同一個單元格中 */

}

此設定將多個項目堆疊在容器的中心，即使它們具有不同的尺寸。

重點

– CSS 網格非常適合複雜的佈局以及當您需要精確控制放置時。

– 對於簡單的居中任務來說， Flexbox通常更簡單。

有了這些基礎知識，您就可以使用 CSS 網格在各種場景中將單一和多個元素居中。

方法 5：如何在 CSS 中使文字居中

文字居中與圖像或 div 等其他元素居中有點不同。這是完成此操作的簡單方法：

將文字區塊居中

當您想要將容器內的文字區塊（如 div 中的段落）居中時，可以使用text-align屬性。當文字位於區塊級元素（例如div 、 p或h1 ）內時，此方法效果最佳。

操作方法如下：

css

。

文字對齊：居中；

}

此程式碼告訴瀏覽器將文字在容器內居中。如果您也想讓容器本身居中，您可以使用 Flexbox 或 Grid 來實現：

css

。

顯示：柔性；

調整內容：居中；

對齊項目：居中；

高度：100vh； /* 使容器全高以垂直居中 */

}

Flexbox 和網格怎麼樣？

Flexbox 和 Grid 非常適合將整個容器居中，但它們不會使這些容器中的文字居中。如果您使用 Flexbox 或 Grid 將段落居中，它會將文字區塊居中，而不是其中的各個行或字元居中。

使用 Flexbox 使文字居中

如果您使用 Flexbox 將段落居中，如下所示：

css

。

顯示：柔性；

調整內容：居中；

對齊項目：居中；

高度：100vh；

}

它將整個段落置於容器內的中心。但要將文字本身在該段落中居中，您還需要text-align: center; 。

未來的 CSS 特性

CSS 有了令人興奮的發展！即將推出的新功能將使居中變得更加容易。目前，使用 Flexbox 或 Grid 以及text-align: center;是最好的處理方法。

這種簡單的方法有助於讓您的文字看起來美觀且居中，無論它位於頁面上的哪個位置！

但考慮到上述所有方法，您可能會困惑哪一種最適合不同的情況。如果是這樣的話，請查看下面的結論。

結論

在本部落格中，您學習如何使用各種工具（例如 Flexbox 和自動邊距）將 DIV 元素水平居中、垂直居中以及在頁面中心居中。這些工具都有自己的優點和使用場景。為了幫助您解決問題，以下是一些常見的用例：

• 自動邊距：使用此功能可實現簡單的水平居中。
• Flexbox：最適合在兩個方向上居中以及處理一行或一列項目時。
• 視窗居中：非常適合需要在螢幕上居中的彈出視窗或元素。
• CSS 網格：非常適合複雜佈局以及需要將行和列居中時。

如果您對這篇文章有任何疑問或疑問，請在下面的評論部分告訴我們：

拉胡爾

Rahul Kumar 是一位網路愛好者和內容策略師，專門從事 WordPress 和網站託管。憑藉多年的經驗和對了解最新行業趨勢的承諾，他制定了有效的線上策略來增加流量、提高參與度並提高轉換率。拉胡爾對細節的關注以及製作引人入勝的內容的能力使他成為任何希望提高其線上形象的品牌的寶貴資產。