Flexbox布局：通过display: flex、justify-content: center和align-items: center实现居中，无需知道子元素尺寸，兼容IE10+；2. 绝对定位+transform：使用top: 50%、left: 50%配合transform: translate(-50%, -50%)，适用于脱离文档流的元素，支持IE9+；3. 绝对定位+margin auto：设置position: absolute及top、left、right、bottom为0，结合固定宽高与margin: auto实现居中；4. Grid布局：通过display: grid与place-items: center或justify-content与align-content居中，适合复杂布局，现代浏览器支持良好。推荐优先使用Flexbox，简洁高效且语义清晰，兼容性好。
实现元素的垂直水平居中是前端开发中的常见需求。不同的布局场景适合不同的方法，下面介绍几种实用且兼容性良好的CSS居中技巧。
1. 使用 Flexbox 布局（推荐）
Flexbox 是现代浏览器中最简单、最灵活的居中方式，适用于大多数容器布局。
通过设置父容器为弹性布局，利用 justify-content 和 align-items 即可轻松实现居中。
- justify-content: center —— 水平居中
- align-items: center —— 垂直居中
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保有高度 */
}
这种方法支持动态内容，无需知道子元素尺寸，兼容性良好（IE10+）。
2. 使用绝对定位 + transform
当无法使用 Flexbox 时，可以结合 position: absolute 和 transform 实现居中。
适用于脱离文档流的弹窗或提示框。
- 将元素从父容器左上角定位到中心位置
- 用 transform 负值回退自身宽高的一半
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
height: 100vh;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
优点是兼容性好（支持到 IE9），不需要知道子元素具体尺寸。
3. 使用绝对定位 + margin auto（需宽高固定）
如果子元素有明确的宽度和高度，可以通过设置四方向偏移为 0，配合 margin: auto 实现居中。
原理是浏览器自动计算外边距，使元素在空间内居中。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.centered {
position: absolute;
width: 200px;
height: 100px;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
}
注意：必须设定宽高，否则元素会撑满容器。
4. 使用 Grid 布局
CSS Grid 是另一种现代布局方式，居中实现非常简洁。
只需设置父容器为 grid，并使用 place-items 或 justify/align 属性。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
place-items: center;
height: 100vh;
}
或者单独控制：
.container {
display: grid;
justify-content: center;
align-content: center;
height: 100vh;
}
Grid 在复杂布局中优势明显，但在老版本浏览器中支持有限。
基本上就这些常用方法。选择哪种取决于你的项目需求和浏览器支持要求。日常开发中，Flexbox 是最推荐的方式，简洁高效，语义清晰。
