【为你总结老生常谈的 --- CSS居中】在网页开发中，CSS居中是一个非常常见但又容易让人困惑的问题。无论是水平居中、垂直居中，还是同时实现水平和垂直居中，都有一些不同的方法可以实现。今天，我们就来一起回顾和总结一些常用的CSS居中技巧。
一、水平居中
| 方法 | 适用场景 | 说明 |
| `text-align: center;` | 文本或内联元素 | 对父容器设置，使子元素内容水平居中 |
| `margin: 0 auto;` | 块级元素（如div） | 需设置宽度，自动左右边距 |
| `flexbox: justify-content: center;` | Flex布局 | 父容器设为flex，子元素自动水平居中 |
| `grid: justify-content: center;` | Grid布局 | 父容器设为grid，子元素水平居中 |
二、垂直居中
| 方法 | 适用场景 | 说明 |
| `line-height: 100px;` | 单行文本 | 设置与父容器高度相同的line-height |
| `display: table-cell;` | 表格单元格布局 | 父容器设为table-cell，配合vertical-align |
| `flexbox: align-items: center;` | Flex布局 | 父容器设为flex，子元素垂直居中 |
| `grid: align-items: center;` | Grid布局 | 父容器设为grid，子元素垂直居中 |
| `transform: translateY(-50%);` | 定位元素 | 结合top: 50%，实现精确居中 |
三、水平和垂直居中
| 方法 | 适用场景 | 说明 |
| `flexbox: justify-content & align-items: center;` | Flex布局 | 同时实现水平和垂直居中 |
| `grid: place-items: center;` | Grid布局 | 简洁写法，等同于justify和align |
| `绝对定位 + transform` | 定位元素 | 使用top: 50%和left: 50%，再通过transform: translate(-50%, -50%)实现居中 |
| `table-cell + text-align + vertical-align` | 传统布局 | 适用于固定高度的容器 |
四、其他小技巧
- 使用 `position: absolute;` 时，注意父容器必须是相对定位（`position: relative;`）
- Flex和Grid布局是现代居中首选，兼容性好且代码简洁
- 对于复杂布局，建议优先使用Flex或Grid，避免过多依赖`margin`或`padding`
总结
虽然“CSS居中”看似简单，但在实际项目中可能会因为不同浏览器、布局方式或元素类型而变得复杂。掌握多种方法，灵活运用，才能在不同场景下快速解决问题。希望这篇总结能帮助你更好地理解和应用CSS居中技巧。
