在網頁設計和布局中，如何將一個小的 `div` 垂直居中于一個大的 `div` 是一項常見的需求。通過純 CSS 的方式實現這一效果，不僅可以提升頁面的美觀性，還能增強用戶體驗。本文將詳細介紹一種簡單且優雅的方法來完成這一目標。
方法一：使用 Flexbox
Flexbox 是現代 CSS 布局中的強大工具，它能夠輕松實現元素的對齊與分布。以下是具體步驟：
1. HTML 結構
首先，創建兩個 `div` 元素，一個是大容器，另一個是需要居中的子元素。
```html
```
2. CSS 樣式
使用 Flexbox 的 `align-items` 和 `justify-content` 屬性來實現垂直和水平居中。
```css
.container {
display: flex;
align-items: center; / 垂直居中 /
justify-content: center; / 水平居中 /
width: 300px; / 大 div 寬度 /
height: 300px; / 大 div 高度 /
background-color: f0f0f0; / 背景顏色 /
}
.centered {
width: 50px; / 小 div 寬度 /
height: 50px; / 小 div 高度 /
background-color: ff6347; / 小 div 背景顏色 /
}
```
方法二：使用絕對定位與 transform
如果不想使用 Flexbox，也可以通過絕對定位和 `transform` 屬性來實現。
1. HTML 結構
保持與方法一相同的 HTML 結構。
```html
```
2. CSS 樣式
使用 `position: absolute` 和 `transform` 來調整位置。
```css
.container {
position: relative;
width: 300px;
height: 300px;
background-color: f0f0f0;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); / 向左和向上移動自身寬度的一半 /
width: 50px;
height: 50px;
background-color: ff6347;
}
```
方法三：使用表格布局
雖然表格布局已經不再是主流，但它依然可以作為一種解決方案。
1. HTML 結構
```html
```
2. CSS 樣式
利用 `display: table` 和 `vertical-align` 實現垂直居中。
```css
.table-container {
display: table;
width: 300px;
height: 300px;
background-color: f0f0f0;
}
.table-cell {
display: table-cell;
vertical-align: middle; / 垂直居中 /
text-align: center; / 水平居中 /
}
.centered {
width: 50px;
height: 50px;
background-color: ff6347;
}
```
總結
以上三種方法都可以有效地將小 `div` 垂直居中于大 `div` 中。其中，Flexbox 是最推薦的方式，因為它簡潔且易于維護。而絕對定位和表格布局則適合特定場景下的應用。根據實際項目需求選擇最適合的方法，可以讓頁面布局更加靈活和高效。
