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