text-align不能居中块级元素，只对行内内容有效；它作用于块级容器内的文本、span、img（默认inline）等行内级内容，而块级元素需用margin:0 auto（需设宽度）或flex布局实现居中。
text-align 不能居中块级元素，只对行内内容有效
很多人写 text-align: center 后发现 div 或 img 没动，是因为这个属性只控制容器内**行内级内容**（如文字、span、img 默认是 inline）的水平对齐。对块级元素本身无效。
常见错误现象：<div style="text-align: center"><div>我不会被居中</div></div> —— 内层 div 仍是左上角位置。
- 要居中块级元素，得用
margin: 0 auto（前提是它有明确宽度，比如width: 300px或max-width: 80%） -
img是 inline 元素，所以text-align: center对它有效；但加了display: block后，就得改用margin: auto - 不要混用：同时设
text-align: center和margin: auto没坏处，但逻辑不同，容易误判原因
align 属性已废弃，别再用 align="center" 这类写法
HTML5 明确废除了 <p align="center"></p>、<h1 align="right"></h1>、<hr align="left"> 等所有带 align 属性的标签写法。浏览器虽大多仍兼容，但 W3C 不再验证，工具链（如 ESLint、HTMLHint）会报错，CI/CD 流水线可能直接拦截。
典型错误场景：从老教程复制代码，或在 CMS 富文本编辑器里点“居中按钮”生成了过时 HTML。
- 替代方案统一走 CSS：
text-align: center（文本/行内内容）、margin: 0 auto（块级元素）、display: flex; justify-content: center（弹性容器） - 特别注意
<center></center>标签：完全过时，2026 年主流浏览器已开始弱化渲染支持，部分企业内网环境已出现错位 - 如果必须兼容极老系统（如 IE8），优先用 class + 外部 CSS，而不是内联
align
表格布局对齐 label/input 的真实约束条件
用 <table> 实现表单对齐，看似简单，但只有满足几个硬性条件才能真正对齐，否则 Chrome/Firefox/Safari 渲染结果不一致。
<p>关键不是“用了 table”，而是怎么用：</p>
<ul>
<li>
<code><label for="name"></label> 必须存在且正确绑定 id，否则可访问性失效，键盘用户无法点击文字聚焦
<td> 上设 <code>vertical-align: middle（CSS）或 valign="middle"（已废弃但仍有用），否则 baseline 错位明显
<input> 设 height 或 line-height，这会破坏单元格默认垂直居中行为<div style="overflow-x: auto"><table>...</table></div>，否则窄屏下整表横向溢出不可滚动Flexbox 底部对齐要防 height 陷阱
用 display: flex; align-items: flex-end 做底部对齐时，最常踩的坑是容器没设高度 —— 此时 flex-end 实际等效于 flex-start，因为没有“底”可依。
例如：<div style="display: flex; align-items: flex-end">
<div>A</div>
<div>B</div>
</div> 在多数浏览器里，A 和 B 会顶在顶部，不是底部。
- 必须显式设置容器高度，如
height: 200px或min-height: 150px - 若内容高度动态，可用
align-self: flex-end单独控制某个子项，比全局align-items更灵活 - 注意
flex-direction: column下的justify-content: flex-end才是“纵向底部”，别和align-items搞反
真正难的从来不是写出能“看起来对齐”的代码，而是写出在缩放 125%、高对比度模式、屏幕阅读器、iOS Safari 和 Windows High Contrast Theme 下都保持对齐逻辑稳定的代码。每个对齐方案背后，都藏着一连串兼容性判断和降级路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
