使用 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 更灵活，传统方法适合简单场景。关键是理解容器和子项的关系，以及不同属性的作用轴向。