总结

1. 容器 flex 布局，jsutify-content: center; align-items: center;
2. 容器 flex 布局，子项 margin: auto;
3. 容器 relative 布局，子项 absolute 布局，left: 50%; top: 50%; transform: translate(-50%, -50%);
4. 子项 absolute 布局，设置固定宽、高，top,left,bottom,right 都设置为 0，然后设置 margin: auto;

---

方法一：Flexbox 布局（推荐）

实现方式：

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

特点：

• 简洁、语义明确。
• 支持现代浏览器。
• 子元素不需要设置宽高。

---

方法二：Flex + margin: auto;

实现方式：

.container {display: flex;
}.child {margin: auto;
}

特点：

• 利用 Flex 容器的自动外边距特性进行居中。
• 子元素需为块级元素或具有尺寸（宽高）。

---

方法三：绝对定位 + transform（适用于未知宽高）

实现方式：

.container {position: relative;
}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

特点：

• 不依赖子元素的宽高。
• 兼容性较好。
• 适用于响应式设计。

---

方法四：绝对定位 + margin: auto（适用于已知宽高）

实现方式：

.container {position: relative;
}.child {position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 200px;height: 100px;margin: auto;
}

特点：

• 需要指定子元素的宽高。
• margin: auto 在绝对定位下依然有效。

---

方法五：Grid 布局（现代方式）

实现方式：

.container {display: grid;place-items: center;
}

特点：

• 使用 CSS Grid 的简写属性 place-items。
• 写法简洁，兼容性良好（现代浏览器支持）。

---

方法六：表格单元格对齐（旧方法）

实现方式：

.container {display: table-cell;vertical-align: middle;text-align: center;
}

特点：

• 父容器需有明确的高度。
• 适合文本或内联元素居中。

---

方法七：line-height + text-align（适用于单行文本）

实现方式：

.container {height: 100px;line-height: 100px;text-align: center;
}

特点：

• 仅适用于单行文本。
• 不适合复杂结构。

---

总结对比表

方法	是否需要知道宽高	是否推荐	适用场景
Flex 布局	否	✅ 推荐	现代布局首选
Flex + margin auto	是	⚠️ 可选	简单场景
绝对定位 + transform	否	✅ 推荐	响应式设计
绝对定位 + margin auto	是	⚠️ 可选	固定尺寸
Grid 布局	否	✅ 推荐	现代项目
表格单元格	否	❌ 不推荐	老旧项目兼容
line-height	否	❌ 不推荐	单行文本

---