- Flexbox 彈性盒子（推薦）
div {display: flex;align-items: center; /* 垂直居中 */justify-content: center;/* 水平居中 */height: 300px; /* 需要指定高度 */
}
? 現代瀏覽器首選方案，支持響應式布局
- Grid 網格布局
div {display: grid;place-items: center; /* 同時垂直水平居中 */height: 300px;
}
? 代碼最簡潔，適合現代項目
- 絕對定位 + 平移
div {position: relative;height: 300px;
}
div::before {content: '';display: inline-block;height: 100%;vertical-align: middle;
}
.content {display: inline-block;vertical-align: middle;
}
? 兼容性好（支持IE8+）
- 表格布局法
div {display: table-cell;vertical-align: middle;height: 300px;width: 200px;
}
?? 注意：需要設置具體寬度
- Line-height 法（單行文本）
div {height: 100px;line-height: 100px; /* 值與高度相同 */text-align: center; /* 水平居中 */
}
?? 僅適用于單行文本內容
選擇建議：
- 現代項目優先使用 Flexbox 或 Grid
- 需要兼容舊瀏覽器時選擇定位法或表格法
- 單行文本可直接用 line-height
- 多行內容推薦 Flexbox/Grid
注意事項：
- 必須為容器設置明確高度
- 如果內容高度超過容器，需要設置
overflow: auto - 移動端布局建議使用 Flexbox
- 圖片垂直居中需要設置
display: block
)
