在 CSS 中实现居中是常见的布局需求，以下是主流居中方案总结（包含优缺点分析），按应用场景分类：
一、水平居中
1. 行内/行内块元素
.parent { text-align: center; /* 父容器设置 */}
- ✅ 优点：简单，兼容性好（包括IE6）
- ⚠️ 缺点：只对行内内容生效（需子元素为
inline/inline-block）
2. 块级元素 + 固定宽度
.child { width: 200px; margin: 0 auto; /* 水平方向居中 */}
- ✅ 优点：兼容性好（IE8+），无额外依赖
- ⚠️ 缺点：必须指定 固定宽度，无法自适应内容
3. Flexbox 布局
.parent { display: flex; justify-content: center; /* 主轴居中 */}
- ✅ 优点：简单灵活，子元素宽度未知也能居中
- ⚠️ 缺点：IE10+ 才支持（部分旧浏览器需前缀）
4. 绝对定位 + transform
.child { position: absolute; left: 50%; transform: translateX(-50%);}
- ✅ 优点：不需指定宽度，自适应内容
- ⚠️ 缺点：
transform渲染性能略低（影响硬件加速），可能受父容器定位限制
二、垂直居中
1. 单行文本/行内元素
.parent { height: 100px; line-height: 100px; /* 值 = 父容器高度 */}
- ✅ 优点：简单高效
- ⚠️ 缺点：仅限单行文本，父容器必须固定高度
2. Flexbox 布局
.parent { display: flex; align-items: center; /* 副轴居中 */}
- ✅ 优点：完美支持多行、多元素垂直居中
- ⚠️ 缺点：同 Flexbox 的浏览器支持问题
3. 绝对定位 + transform
.child { position: absolute; top: 50%; transform: translateY(-50%);}
- ✅ 优点：高度自适应，无需指定子元素高度
- ⚠️ 缺点：脱离文档流，影响其他元素布局
4. Table-Cell 模拟
.parent { display: table-cell; vertical-align: middle; /* 垂直居中 */ height: 300px;}
- ✅ 优点：兼容性好（IE8+），适合老项目
- ⚠️ 缺点：父元素需明确高度，结构冗余（需配合
display:table）
三、水平垂直同时居中
1. Flexbox（推荐）
.parent { display: flex; justify-content: center; align-items: center;}
- ✅ 优点：代码简洁，自适应性强
- ⚠️ 缺点：略老的浏览器需加前缀（
-webkit-）
2. Grid 布局（现代方案）
.parent { display: grid; place-items: center; /* 单行实现双重居中 */}
- ✅ 优点：代码极简（一行），二维布局高效
- ⚠️ 缺点：IE 完全不支持，适用现代浏览器（2017+）
3. 绝对定位 + transform
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
- ✅ 优点：兼容性较好（IE9+），不需宽高
- ⚠️ 缺点：脱离文档流，可能受
transform-origin影响
4. 负 Margin（已知宽高）
.child { position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; margin-top: -50px; /* -height/2 */ margin-left: -100px; /* -width/2 */}
- ✅ 优点：兼容性最好（IE6+）
- ⚠️ 缺点：必须 精确知道子元素宽高，不响应内容变化
四、实用选择建议
| 场景 | 推荐方案 | 说明 |
|---|---|---|
| 现代浏览器项目 | Flexbox / Grid | 简洁、灵活、主流 |
| 需要兼容旧IE | 负Margin / Table-Cell | 稳定但代码稍复杂 |
| 未知尺寸元素居中 | 绝对定位 + transform | 自适应内容宽高 |
| 单行文本居中 | line-height | 最快方案 |
| 多行文本居中 | Flexbox / Table-Cell | 避免 line-height 限制 |
实际开发中推荐优先 Flexbox（覆盖90%场景），特殊需求再考虑其他方案。如需支持IE兼容模式，可搭配 text-align + 负Margin 作为备选。
