將 div 或 Text 在 CSS 中置中的 11 種方法
將 div 或 Text 在 CSS 中置中的 11 種方法
無論您是從頭開始建立網站，還是借助網站構建工具，都必須對 HTML 和 CSS 有基本的了解，以自訂您的頁面佈局。一旦您掌握了這些基礎知識，您可以深入研究元素的樣式，如學習如何垂直和水平置中 div。
在這篇文章中幫助您發現多種在 CSS 中置中元素的方法。我將帶您深入了解以下概念，讀完之後，您將熟悉如何垂直和水平置中 div 以及其他元素。讓我們開始吧。
什麼是 div，以及為什麼要將 div 置中 ？
許多初學者在建立佈局時會遇到的挑戰之一是他們如何安排和設計頁面上的元素。您需要問自己：您是否希望元素重疊或在它們之間留有空間？您是否希望在頁面上某些 Text 置中，其他靠左對齊？您是使用純 CSS 還是框架？這是很多問題。幸運的是，div 可以幫助解決這些問題。
div（簡稱內容區段元素）是一個通用的區塊級 HTML 元素。正如其名稱所暗示的，div 可以將您的網頁分隔成更容易消化的部分。透過這樣做，您可以使用 CSS 針對它們進行制定設計。
我舉個例子。假設您想在您的部落格文章中包含一個引用區塊，並且希望將其置中，而不是像您的其他正文 Text 一樣靠左對齊。在這種情況下，我建議您將 Text 包裹在一個 div 元素中。然後，對該元素應用 CSS。這確保了您的其他頁面保持一致——它只會將樣式應用於您所識別的元素。
了解如何置中 div 以及 div 中的 Text ，尤其是對於初學者來說是一項有價值的技能。透過學習這一點，您可以防止您的內容延伸到邊緣並與其他元素重疊。這樣的情況，您可能已經親身經歷過，可能會導致問題。
學會如何置中 div 或 div 中的 Text 是初學者必須掌握的重要技能。現在，我將指導您如何做到這一點。
如何在 CSS 中置中 div
有幾種方法可以在 CSS 中置中 div。是的，可以垂直和水平置中 div——儘管在垂直置中方面稍微複雜一些。我將帶您了解這兩種方法。然後，我會分享如何垂直和水平置中 div——甚至在另一個 div 中置中 div。
如何水平置中 div
要在頁面上水平置中 div：
為 div 指定一個名為 center 的 CSS 類別。在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開樣式括號。
透過百分比或像素設定元素的寬度，例如 width: 50%; 或 width: 500px。
將 margin 屬性設置為 auto。這樣 div 將佔據 CSS 中指定的寬度，瀏覽器將在兩側的邊距之間平分剩餘的空間。
您是否注意到邊距與內邊距的區別？我會使用內邊距在 div 的邊框和 div 中的段落（在這種情況下是行內元素）之間創造空間。如果您想了解更多關於這兩個屬性之間的區別，我建議您瀏覽這篇文章：CSS Margin vs. Padding: What's the Difference?
如何垂直置中 div
您已經學會如何水平置中 div。現在，我將向您展示如何垂直置中 div。這稍微困難一些，但並非不可能。
要在頁面上垂直置中 div，您可以使用 CSS 的 position 屬性、top 屬性和 transform 屬性。這是方法：
為 div 指定一個名為 center 的 CSS 類別。在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開樣式括號。
將您的 div 的 position 設置為 absolute，這樣它就不受正常文檔流程的影響。
將 top 屬性設置為 50%。這樣告訴瀏覽器將 div 的頂部邊緣與頁面的垂直中心對齊（即在頁面向下 50% 處）。
然後，將 transform 屬性設置為 translate(0, -50%)。我本可以跳過最後一步，但這裡有個問題：將 div 的頂部邊緣與頁面的中間對齊並不能置中 div。我需要定義最後一個屬性，即 transform 屬性。
雖然有幾種不同的轉換方法，但我想使用 translate() 方法沿著頁面的 Y 軸移動 div。我想將 div 從其當前位置向上移動 50%。這將告訴瀏覽器將 div 的中心放在頁面的垂直中心。
如何水平和垂直置中 div
有時，僅僅水平或垂直置中 div 並不夠，您可能需要同時進行這兩者。為了實現這一點，我將向您展示您可以按照上面部分描述中幾乎相同的步驟操作。您將使用 position、top 和 transform 屬性。唯一的區別是您還將使用 left 屬性來水平置中 div。
這是方法：
為 div 指定一個名為 center 的 CSS 類別。在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開樣式括號。
將您的 div 的 position 設置為 absolute，這樣它就不受正常文檔流程的影響。
將 left 和 top 屬性都設置為 50%。這樣告訴瀏覽器將 div 的左側和頂部邊緣與頁面的水平和垂直中心對齊（即在頁面向右和向下 50% 處）。
將 transform 屬性設置為 translate(-50%, -50%)。這將 div 從其當前位置向左和向上移動 50%。這將告訴瀏覽器將 div 的中心放在頁面的中心。
這就是如何同時水平和垂直置中 div。
如何在 div 中置中 div
如果您需要在一個 div 中置中另一個 div，您可以採用三種方法。每種方法都可以在頁面上水平、垂直或同時水平和垂直置中 div。
使用 position、top、left 和 margin 屬性
要在一個 div 中水平和垂直置中另一個 div，您可以使用 position、top、left 和 margin 屬性。但是，要做到這一點，您需要知道這些 div 的寬度和高度。
這是方法：
在您的 HTML 中將一個 div 元素包裹在另一個 div 元素中。給內部 div 分配一個類別名稱，例如 child，給外部 div 分配一個類別名稱，例如 parent。
在您的 CSS 代碼中，打開類別選擇器 .parent 的大括號。
設置外部 div 的高度和寬度（例如 300px 和 300px），然後將 position 屬性設置為 relative。
現在您可以對內部 div 進行樣式設計。打開類別選擇器 .child 的大括號。設置內部 div 的高度和寬度（例如 100px 和 100px），然後將其 position 設置為 absolute。
接下來，將 top 和 left 屬性都設置為 50%。
最後，將 margin 屬性設置為 -50px 0 0 -50px，這樣負的頂部和左側邊距將正好是子元素的高度和寬度的一半（在這種情況下分別是 -50px 和 -50px，這個數字可能會有所不同）。
使用 position、top、left 和 transform 屬性
要在 div 中水平和垂直置中另一個 div，而不考慮其未知的高度和寬度，您可以使用 transform 屬性而不是 margin 屬性。您仍將使用 CSS 的 position、top 和 left 屬性。
這是方法：
在您的 HTML 中將一個 div 元素包裹在另一個 div 元素中。給內部 div 分配一個類別名稱，例如 child，給外部 div 分配一個類別名稱，例如 parent。
在您的 CSS 代碼中，打開類選擇器 .parent 的大括號。
設置外部 div 的高度和寬度（例如 300px 和 300px）。
將 position 屬性設置為 relative。
現在您可以對內部 div 進行樣式設計。打開類選擇器 .child 的大括號。
將其 position 設置為 absolute。
然後將 top 和 left 屬性設置為 50%。
將 transform 屬性設置為 translate(-50%,-50%)。
使用這種方法，您不需要定義寬度或高度屬性。您也不會定義 margin 屬性。相反，transform 屬性將把 div 從容器的邊緣向右和向下移動。這確保了 child div 真正置中在 parent div 中。
使用 Flexbox
我使用的一種在一個 div 中置中另一個 div 的策略是 CSS Flexbox。Flexbox 是一種出色的方法，因為它是響應式的，不需要進行邊距計算。然而，有幾個額外的步驟需要考慮。現在，我將與您分享這些步驟。
要使用 Flexbox 在 div 中水平和垂直置中另一個 div，這是您需要做的：
在您的 CSS 代碼中，找到您的 html 和 body 選擇器。
在大括號內，將這兩個屬性的高度設置為 100%。（注意：如果您希望 parent 容器佔據整個視窗，您也可以將其高度設置為 100%。在這個演示中，我將 parent 容器的高度設置為特定的高度。）
在您的 HTML 中將一個 div 元素包裹在另一個 div 元素中。給內部 div 分配一個類別名稱，例如 child，給外部 div 分配一個類別名稱，例如 parent。
在您的 CSS 代碼中，打開類選擇器 .parent 的大括號。
設置外部 div 的高度（例如 200px）。
將 display 屬性設置為 flex。這將定義 parent 容器為一個 flex 容器。
將 align-items 和 justify-content 屬性設置為 center。這將告訴瀏覽器在垂直和水平方向上置中 flex 項目（即 div 中的 div）。
技術上，我們已經完成了，但讓我們仍然為內部 div 設計樣式。打開類選擇器 .child 的大括號。設置內部 div 的高度和寬度（例如 100px 和 100px）。
如何在 CSS 中置中文字在 div 中
假設我想在 CSS 中置中文字在 div 中。我可以透過幾種方式實現這一點。
最常見的方法是使用 text-align 屬性水平置中文字。另一種方法是使用 line-height 和 vertical-align 屬性。最後一種方法專門適用於彈性項目（flex items），並需要使用 justify-content 和 align-items 屬性。使用這種方法，您可以水平、垂直或同時水平和垂直置中文字。
我將帶您逐一了解這些方法：
如何在 div 中水平置中文字
有兩種方法可以在 div 中水平置中文字。這裡有兩個例子。
1.使用 text-align 屬性
假設您想在 div 中創建一個簡短的段落。在大多數情況下，您可以使用 text-align 屬性及其值 center 來水平置中文字。這是方法：
為 div 分配一個名為 center 的 CSS 類別。
在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開大括號。
將 text-align 屬性設置為 center。
2.使用 justify-content 屬性
在上面規則中有一個例外：如果使用 display 屬性將您的 div 定義為彈性容器（flex container），那麼您不能使用 text-align 屬性在 div 中水平置中文字。
相反，您必須使用 justify-content 屬性，值為 center。
我將向您展示如何建立與上面相同的 div 元素。請按照以下步驟操作：
給 div 分配一個類別名稱，例如 center。
在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開大括號。
將 display 屬性設置為 flex，使 div 成為一個彈性容器。
將 justify-content 屬性設置為 center。
如何在 div 中垂直置中文字
在 div 中垂直置中文字比水平置中更複雜，但有幾種方法可以做到。現在將帶您了解不同的方法。
1.使用 padding 屬性
在大多數情況下，您可以使用 padding 屬性在 div 中垂直置中文字。使用此方法時，padding 將有兩個值。第一個值將設置上方和下方的間距，第二個值將設置左右的間距。
請與我一起拆解這個過程：
為 div 分配一個 CSS 類別，例如 center。
在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開大括號。
將 padding 屬性設置為 50px 0。
由於您想要在 div 中垂直置中文字，第一個值（代表上下間距）可以是任何正長度或百分比值。第二個值（代表左右間距）應為 0。
2.使用 line-height 屬性
通常，您還可以使用 line-height 屬性在 div 中垂直置中文字。
在您的 HTML 中，在 div 中添加一個段落元素，然後將 div 的 line-height 屬性設置為等於 div 的高度。
這是方法：
為 div 分配一個 CSS 類別，例如 center。
在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開大括號。
將 div 的高度和 line-height 屬性設置為相同的大小（在下面的例子中，我們使用 150px）。
查找或創建您的 p CSS 選擇器。
若要居中具有多行的段落，請將 display 屬性設置為 inline-block。然後，將 line-height 屬性設置為 normal，並將 vertical-align 屬性設置為 middle。
最後一步確保了 div 中的文字垂直居中，無論是單行還是多行文字。
3.使用 align-items 屬性
如果您使用 display 屬性將 div 定義為彈性容器（flex container），那麼您不能使用上述方法在 div 中垂直置中文字。相反，您必須使用 align-items 屬性，並將其值設置為 center。
這是方法：
為 div 分配一個 CSS 類別，例如 center。
在您的 CSS 代碼中，輸入 .center CSS 選擇器並打開大括號。
將 display 設置為 flex，以使 div 成為彈性容器。
為了更清楚地看到文字已垂直居中，還需定義 height 屬性（在下面的示例中，我們使用 150px）。否則，彈性容器的高度將僅適應其中包含的段落。
接著，將 align-items 屬性設置為 center。
使用 HTML 和 CSS 構建自定義布局。
這就是您需要知道的有關如何垂直和水平置中 div，甚至超出這些的所有知識。正如您所看到的，一點點編碼知識就可以讓您控制和自定義您的布局。理解 margin、position 和 flex 等屬性，將使您能夠在頁面上幾乎置中任何 div 或區塊元素。