使用 Flexbox、绝对定位+transform、Grid 或 text-align/line-height 可实现居中。1. Flexbox 最推荐，父容器设 display: flex，justify-content: center 和 align-items: center；2. 绝对定位配合 top: 50%、left: 50% 与 transform: translate(-50%, -50%) 兼容性好；3. Grid 布局用 place-items: center 简洁高效；4. 文本居中可结合 text-align 与 line-height，多行文本建议用 Flexbox。注意父元素需有高度，避免失效。
让元素在父容器中垂直和水平居中，是CSS布局中的常见需求。实现方式多样，选择哪种取决于元素类型、是否固定尺寸、浏览器兼容性要求等。以下是几种实用且广泛使用的方案。
1. 使用 Flexbox（推荐）
Flexbox 是现代布局的首选方法，语法简洁，兼容主流浏览器。
只需在父容器上设置 display: flex，并使用 justify-content 和 align-items 即可实现居中。
- justify-content: center —— 水平居中
- align-items: center —— 垂直居中
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保有高度 */
}
.child {
/* 子元素无需特殊设置 */
}
适用于块级、行内块、图片、文字等各种子元素，支持动态尺寸。
2. 使用绝对定位 + transform
当无法使用 Flexbox 时（如需要兼容老版本IE），可用此方法。
通过 position: absolute 将元素脱离文档流，再用 top: 50% 和 left: 50% 移动到中心附近，最后用 transform: translate(-50%, -50%) 反向偏移自身宽高的一半。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
position: relative;
height: 100vh;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
优点：兼容性好，适用于固定或不定尺寸元素。
注意：父元素必须有 position: relative 或其他定位上下文。
3. 使用 Grid 布局
CSS Grid 提供了另一种现代解决方案，尤其适合复杂布局场景下的居中。
设置父容器为网格容器，并使用 place-items: center 可一键居中所有子项。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
display: grid;
place-items: center;
height: 100vh;
}
或者单独控制：
.parent {
display: grid;
justify-items: center;
align-items: center;
}
Grid 方法语义清晰，适合与其它网格功能结合使用。
4. 文字或行内元素的居中
对于纯文本或行内元素，可通过以下方式实现：
- 水平居中：text-align: center 在父元素上设置
- 垂直居中：line-height 等于容器高度（适用于单行文本）
示例：
.parent {
text-align: center;
line-height: 200px; /* 与 height 一致 */
height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
line-height: normal; /* 恢复子元素行高 */
}
若有多行文本垂直居中，建议改用 Flexbox 更可靠。
基本上就这些常用方法。根据项目环境选择最合适的一种即可。Flexbox 最通用，推荐优先掌握。不复杂但容易忽略细节，比如父元素高度缺失会导致居中失效，记得检查基础结构。
