HTML5已废弃align等对齐属性，对齐完全由CSS控制：text-align仅作用于行内内容水平对齐；块级元素自身居中需用margin: auto或Flexbox；Flexbox中justify-content控主轴、align-items控交叉轴；Grid中place-items仅影响网格项在单元格内的对齐。
HTML5 本身没有新增专门的“对齐属性”， 这是最常被误认为“HTML 对齐”的 CSS 属性，但它只作用于**行内级内容**（如文字、 想让一个 Flex 布局里，“对齐”分两个轴：主轴（ 立即学习“前端免费学习笔记（深入）”； Grid 支持比 Flex 更细粒度的对齐控制，尤其适合二维布局。但新手容易把 最容易被忽略的一点：所有这些 CSS 对齐能力，都依赖于**正确的文档流和盒模型理解**。写个 align 这类全局属性在 HTML5 中已被废弃（如 用
text-align 控制行内内容水平对齐、图片等）在块容器内的水平位置：
text-align: left / right / center / justify 都有效 等块级元素自身不生效（想居中块自己，得用别的方法）div {
text-align: center; /* 让内部的文字、img、span 居中 */
}让块级元素自身居中：用
margin: auto 或 Flex 在父容器里水平居中？不能靠 HTML 属性，核心就两条路：
margin: 0 auto（需设置 width）display: flex，再用 justify-content: center
margin: auto 对垂直居中无效（除非是 flex 子项或绝对定位）.container {
display: flex;
justify-content: center; /* 水平居中子项 */
align-items: center; /* 垂直居中子项（如果高度已知或有约束） */
}Flexbox 的对齐属性必须成对理解
flex-direction 决定）和交叉轴。别只记名字，要看它管哪一轴：
justify-content → 控制**主轴**上子项的分布（如 flex-row 时是水平）align-items → 控制**交叉轴**上子项的对齐（如 flex-row 时是垂直）align-self → 单个子项覆盖父级的 align-items，仅对该子项生效align-items: center 在父容器没设高度时可能“看不出效果”，因为容器高度由内容撑开Grid 布局中的对齐更精细，但别滥用
place-items
place-items 当万能居中开关：
place-items: center = justify-items: center + align-items: center
margin: auto
justify-self / align-self
float: left 或 position: absolute，很多对齐规则就自动失效了——不是属性没用，是元素已脱离常规布局上下文。
