9.1 水平居中
元素居中 在網頁設計中是個基本任務，這能創造出美觀且易於閱讀的佈局。下面我們會用現代的 CSS 技術討論各種水平和垂直居中的方法。
1. 使用 margin: auto 居中區塊元素
最簡單的區塊元素居中方式就是使用 margin: auto。
範例：
CSS
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
HTML
<div class="centered-box"></div>
代碼解釋：
margin: 0 auto;: 自動設置左右邊距，讓元素水平居中
2. 使用 text-align 居中行內元素
要在區塊元素內部居中行內或內聯元素，可以使用 text-align: center 屬性。
範例：
CSS
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
HTML
<div class="container">
<div class="inline-element">行內元素</div>
</div>
代碼解釋：
text-align: center;: 在區塊容器內部居中內聯（行內）元素
3. 使用 Flexbox 居中元素
Flexbox 提供了一種靈活且簡單的方式來水平和垂直居中元素。
範例：
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
代碼解釋：
display: flex;: 設置容器為 Flexboxjustify-content: center;: 水平居中元素align-items: center;: 垂直居中元素（將在後面詳細討論）
9.2 垂直居中
1. 使用 Flexbox 居中
Flexbox 提供了一種簡單的垂直居中方式。
範例：
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
代碼解釋：
align-items: center;: 垂直居中元素
2. 使用 CSS Grid 居中
CSS Grid 提供了強大的元素居中能力：
CSS
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="grid-container">
<div class="centered-box"></div>
</div>
代碼解釋：
display: grid;: 設置容器為 CSS Gridplace-items: center;: 在水平和垂直方向上居中元素
3. 使用絕對定位和 CSS 轉換居中
使用絕對定位和 CSS 轉換來垂直居中元素。
範例：
CSS
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="container">
<div class="centered-box"></div>
</div>
代碼解釋：
position: absolute;: 將元素相對於容器進行絕對定位top: 50%;,left: 50%;: 將元素從容器的上邊和左邊偏移 50%transform: translate(-50%, -50%);: 將元素水平和垂直偏移 50% 自身的寬度和高度來進行居中
4. 使用表格和單元格的垂直居中
利用表格和單元格來垂直居中元素。
範例：
CSS
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
HTML
<div class="table-container">
<div class="table-cell">
<div class="centered-box">居中元素</div>
</div>
</div>
代碼解釋：
.table-container: 創建一個展示樣式為table的容器.table-cell: 創建一個展示樣式為表格單元格，且垂直對齊方式為middle的單元格
GO TO FULL VERSION