使用 CSS 將元素居中的 3 種簡單方法
##＃ 快速鏈接
⭐一個簡單的 HTML 檔案來練習居中
⭐使用 Flexbox 將 Div 元素置中
⭐使用 CSS 網格將 Div 元素置中
⭐使用 CSS 定位將 Div 元素置中
要點
在網頁設計中集中元素曾經是一項艱鉅的任務，但當代 CSS 可以輕鬆地實現中心對齊。
Flexbox 已成為以集中方式對齊內容的主要技術，提供了多功能且適應性強的網格系統，有助於元素的無縫排列。
透過利用 CSS 網格和定位技術可以實現網站上元素的集中，從而在控制內容的排列和對齊方面提供廣泛的精確度。
長期以來，將網頁佈局中的元素居中一直是設計師的煩惱，因為這並不總是一件容易完成的任務。然而，許多設計都需要將元素置於中心，值得慶幸的是，當代 CSS 為這一目的提供了強有力的支持。
了解利用 Flexbox、CSS 網格以及傳統 CSS 定位技術將 div 水平和垂直居中的流程。
練習居中的簡單 HTML 文件
提供的程式碼範例說明了透過利用基本 HTML 結構實現水平對齊，同時操作 CSS 屬性以實現各種效果。對不同樣式表的實驗將有助於深入了解這些屬性的行為。
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh-16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
使用 Flexbox 將 Div 元素置中
Flexbox 採用簡單的策略，因其適應性而成為首選。此佈局模型有利於輕鬆對齊和分配空間，使其成為在容器內集中組件的最佳解決方案。
透過應用以下 CSS 規則，利用 Flexbox 集中內容:
⭐ 將您的 div 元素包裝在容器內。將 display: flex 屬性套用到容器以啟動 Flexbox 佈局。在一個簡單的測試案例中，主體可以充當容器:
body {
display: flex;
}
⭐ 使用 justify-content 和align-items 屬性分別沿著主軸（水平）和橫軸（垂直）對齊項目。若要將兩個軸置中，請將這些屬性設為 center 。對於一個簡單的演示，您還應該將 body 的高度設為 100vh，這樣您就可以看到垂直對齊的效果。
body {
justify-content: center;
align-items: center;
}
⭐ 為 div 指定背景顏色以視覺化其在最終頁面上的位置:
div { background-color: red; }
從上到下和從左到右的方向。
使用 CSS 網格將 Div 元素置中
使用 CSS 網格將元素居中可以高度精確地控制佈局和對齊，從而在設計具有複雜結構的網頁時具有更大的靈活性。
⭐ 為您的佈局定義一個容器並套用 display: grid 樣式來啟動 CSS 網格。在這種情況下，身體充當容器。
body {
display: grid;
}
⭐ 使用 grid-template-columns 和 grid-template-rows 屬性來定義網格的結構。對於居中，單列和行就足夠了，因此兩者都使用 1fr。
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
⭐ 使用 place-items 屬性將網格的內容水平和垂直居中。
body {
place-items: center;
}
⭐ 設定 div 元素的背景樣式，使其在網格容器的中心可視化。
div {
background-color: blue;
}
在這種情況下，一個單獨的屬性控制 Div 元素在網頁上的最重要位置:
使用 CSS 定位將 Div 元素置中
使用 CSS position 屬性讓 Div 元素居中需要了解 CSS 轉換和過渡的功能。這種理解可以使元素在其父容器內正確對齊。下面提供了詳細的過程以及說明性範例。
⭐ 若要定位 div 元素，請確保其容器具有相對位置。這會建立一個相對定位上下文，因此您可以將 div 放置在其容器的中心。
body {
position: relative;
}
⭐ 對 div 元素套用絕對定位，然後使用 top 和 left 屬性將 div 的左上角精確定位在其容器的中心。
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: green;
}
translate(-50%,-50%) 轉換將 div 向左和向上移動一半寬度和一半高度。
這種方法的操作方法是先將元素的左上角與螢幕中心對齊，然後分別水平和垂直移動其寬度的二分之一和高度的二分之一。
Flexbox、CSS 網格和 CSS 定位是將網站內容居中的高效技術。透過利用 Flexbox，人們可以透過最少的編碼輕鬆實現水平和垂直居中。 CSS 網格提供了強大的二維對齊功能，同時採用 CSS 定位允許元素相對於其包含的父元素居中。
透過採用這樣的方法，可以確保網站的精緻和優美的外觀。