使用Flexbox、Grid及传统方法可实现CSS对齐。1. Flexbox通过display: flex配合justify-content和align-items实现子元素水平垂直居中；2. Grid利用display: grid和place-items: center进行二维居中；3. 传统方法中，块级元素可用margin: 0 auto水平居中，绝对定位元素结合top: 50%、left: 50%与transform: translate(-50%,-50%)实现居中；4. 文本或内联元素通过text-align: center水平居中，vertical-align: middle实现垂直对齐。现代布局推荐Flexbox和Grid，兼容性强且控制灵活，需注意容器尺寸与定位上下文设置。
在 CSS 中实现容器与子元素的对齐，主要依赖于盒模型、浮动、定位以及现代布局方式如 Flexbox 和 Grid。下面介绍几种常用的对齐方法，适用于不同场景。
使用 Flexbox 实现水平和垂直居中
Flexbox 是目前最常用且最灵活的布局方式之一，适合在一维方向上对齐子元素。
示例：让子元素在容器中水平垂直居中
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 300px; /* 容器需有高度 */
}
只要给父容器设置 display: flex，就可以通过 justify-content 控制主轴（默认为横轴）对齐，用 align-items 控制交叉轴（竖轴）对齐。
立即学习“前端免费学习笔记（深入）”；
使用 CSS Grid 进行二维对齐
Grid 更适合复杂二维布局，也能轻松实现对齐。
示例：网格容器中居中单个项目
.container {
display: grid;
place-items: center; /* 同时设置水平和垂直居中 */
height: 300px;
}
place-items 是 align-items 和 justify-items 的简写，适用于所有网格项。也可以使用 place-content: center 对齐整个网格内容。
传统方法：使用 margin 或 transform 居中
在不使用 Flex 或 Grid 的情况下，也可以用老方法实现居中。
- 块级元素水平居中：margin: 0 auto，前提是设置了明确宽度。
- 绝对定位元素居中：
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这种方法适用于脱离文档流的元素，常用于模态框或提示框居中显示。
文本与内联元素的对齐
对于文本或 inline-block 元素，可以使用 text-align 和 vertical-align。
- 让内联子元素水平居中：父元素设置 text-align: center。
- 垂直对齐内联元素：使用 vertical-align: middle，常用于图片与文字对齐。
基本上就这些常见对齐方式。根据布局需求选择合适的方法，Flexbox 和 Grid 能覆盖大多数现代开发场景，兼容性和控制力都很强。不复杂但容易忽略的是容器尺寸和定位上下文的影响，记得检查父元素是否具有正确尺寸或定位设置。基本上就这些。
