<center>标签在HTML5中已完全废弃，不能用；应按场景选用text-align: center（行内内容）、margin: 0 auto（定宽块级元素）、Flex布局（全面居中）等CSS方案替代。
center 标签在 HTML5 中已完全不被支持，不能用于现代项目。它不是“快速排版”的捷径，而是遗留陷阱——浏览器可能渲染，但校验失败、SEO 可能降权、团队协作时容易引发误解。
为什么 center 标签会失效或被拒绝
HTML5 规范明确移除了 center 标签，所有主流构建工具（Vite、Webpack、ESLint + HTML 插件）、W3C 验证器、甚至 VS Code 的 IntelliSense 都会标红或警告。实际现象包括：
- 页面仍能显示居中效果（因浏览器兼容性兜底），但控制台报错
Unknown element 'center' - CI/CD 流程中 HTML 静态检查直接失败
- 使用 Prettier 自动格式化时可能被自动删除或替换
text-align: center 不起作用的典型场景
这不是 CSS 写错了，而是作用对象理解偏差。它只影响块级容器内的行内内容（文本、img、span），不移动容器自身。
- 给一个
div加text-align: center，里面放另一个div—— 子div不会居中（它是块级元素，不是“内容”） - 父容器用了
display: flex，此时text-align完全被忽略，对齐由justify-content控制 -
float: left或position: absolute的子元素，也会脱离text-align作用流
真正可靠的水平居中方案选哪个
取决于你要居中的目标和上下文约束：
- 纯文本段落、标题、按钮内文字 → 直接给父容器加
text-align: center，最轻量、兼容性最好（IE6+） - 需要同时居中一个盒子（比如卡片、登录框）→ 必须用
margin: 0 auto，但要确保该盒子是display: block且有明确width（不能是100%或auto） - 响应式布局或需垂直+水平居中 → 用
display: flex+justify-content: center，注意父容器别漏写display: flex，且避免子元素用float或position: absolute - 绝对定位元素（如弹窗、提示气泡）→ 必须配对使用
left: 50%+transform: translateX(-50%)，且父容器得是position: relative
真正难的不是“怎么写”，而是判断「谁该被居中」和「谁在控制对齐」。很多问题反复出现，是因为把 text-align 当成万能居中开关，而没看清当前元素的 display 类型、是否脱离文档流、父容器有没有接管布局权。
