CSS 如何实现水平垂直居中？

Question

CSS 如何实现水平垂直居中？

仓乃文 · Accepted Answer

水平垂直居中有多种实现方式，推荐使用 Flexbox 或 Grid，代码简洁且兼容性好。

Flexbox 方案（推荐）：
```css
.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}
```

Grid 方案（更简洁）：
```css
.container {
  display: grid;
  place-items: center;     /* 水平垂直同时居中 */
}
```

绝对定位方案（适用于尺寸固定的元素）：
```css
.container { position: relative; }
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

补充说明：
- Flexbox 和 Grid 是现代布局首选，IE 已基本淘汰
- 绝对定位方案需要元素有固定尺寸或内容自适应
- place-items 是 grid 的简写，等于 align-items + justify-items