使用 Flexbox 可通过 justify-content 和 align-items 实现子元素水平垂直居中；2. Grid 布局利用 place-items 或 justify/align-items 进行二维对齐；3. 传统方法用 margin: 0 auto 实现块级元素水平居中；4. 文本对齐可用 text-align 和 line-height。Flexbox 通用，Grid 灵活，传统适用于简单场景。
调整盒子对齐方式主要依赖于 CSS 的布局模型，比如 Flexbox、Grid 和传统方法（如 margin 和 text-align）。下面介绍几种常用且实用的方法。
使用 Flexbox 居中对齐
Flexbox 是最常用的对齐方式之一，适合一维布局（行或列）。
说明：给父容器设置 display: flex，再通过 justify-content 和 align-items 控制主轴和交叉轴的对齐。
- justify-content: center —— 水平居中子盒子
- align-items: center —— 垂直居中子盒子
- flex-direction: column —— 切换为主轴为垂直方向
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 300px; /* 需要有高度才能看到垂直居中效果 */
}使用 CSS Grid 实现精准对齐
Grid 适用于二维布局，可以同时控制行和列的对齐方式。
说明：父容器设为 display: grid，用 place-items 或分开使用 justify-items 与 align-items。
- place-items: center —— 同时设置内容在行和列上居中
- justify-items: start | end | center —— 控制项目在单元格内的水平对齐
- align-items: center —— 控制垂直对齐
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
place-items: center;
height: 300px;
}传统方法：margin 自动对齐
适用于块级盒子的水平居中，不涉及 Flex 或 Grid 时使用。
说明：将盒子设置固定宽度，再使用 margin: 0 auto 实现水平居中。
- 盒子必须是块级元素（如 div）
- 需要设置明确的 width
- 只支持水平居中，无法垂直居中
示例代码：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 200px;
margin: 0 auto; /* 左右 margin 自动均分，实现居中 */
}文本内容的对齐
如果只是调整盒子内文字或内联元素的对齐，可用以下属性。
- text-align: center —— 让盒子内的文本或内联元素水平居中
- line-height 等于 height —— 单行文本垂直居中
示例：
.text-box {
text-align: center;
line-height: 100px; /* 和 height 一致，单行垂直居中 */
height: 100px;
}基本上就这些。根据你的布局需求选择合适的方式，Flexbox 最通用，Grid 更灵活，传统方法适合简单场景。关键是理解容器和子项的关系，以及不同属性的作用轴向。
