标签在 html5 中已废弃，应改用 text-align: center 作用于父容器实现文字居中，它兼容性好、语义清晰且支持多行文本，而 margin: 0 auto 仅适用于有定宽的块级元素居中。
<center></center> 标签在 HTML5 中已彻底废弃，不能用，也不该用。
为什么 <center></center> 会失效或被忽略
浏览器仍可能“渲染”它，但这是出于向后兼容的容忍，不是支持。W3C 明确移除了该标签，所有现代 HTML 验证器（如 W3C Validator）会报错 Element “center” not allowed in this context。它不参与 CSS 盒模型，无法设置 margin/padding/width，也无法响应媒体查询或 JavaScript 操作——本质是“伪样式标签”，与语义化、可维护性完全背道而驰。
text-align: center 是替代 <center></center> 的标准方案
它直接对应原 <center></center> 的行为：让块级容器内的行内内容（文字、<span></span>、<img>）水平居中。
- 必须作用于**父容器**，不是文字本身：例如
<div style="text-align: center">文字</div> - 对子元素是否换行无感，天然支持多行文本居中
- 不改变子元素 display 类型，
<div> 子元素仍默认左对齐（除非它自己也设了 <code>text-align） - 在表格中对
<td> 和 <code><th> 同样有效，且优先级高于浏览器默认对齐 <h3>跨行文字居中 ≠ 元素居中，别混用 <code>margin: 0 auto常见错误：给一段多行
<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/868" title="Decktopus AI"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679992462994.png" alt="Decktopus AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/868" title="Decktopus AI" class="overflowclass">Decktopus AI</a> <p class="overflowclass">Decktopus AI是一款面向商务演示和轮播内容的 AI 演示文稿生成工具。</p> </div> <a rel="nofollow" href="/ai/868" title="Decktopus AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>加margin: 0 auto，以为能居中——它只对设置了width的块级元素生效，而<p></p>默认 width: 100%，没空间可缩。真正要居中的是文字内容，不是段落盒子本身。- 正确做法：给
<p></p>的父容器（比如<div class="wrapper">）设 <code>text-align: center - 如果父容器是 flex 布局，
text-align完全无效，得改用justify-content: center - 若需同时垂直居中（比如卡片里一段说明文字），
text-align不管用，必须上display: flex或position: absolute + transform
兼容性与可访问性提醒
text-align: center在所有浏览器（包括 IE6）都 100% 支持，无障碍阅读器也能正确识别其语义（“这段文字居中显示”）。而<center></center>无任何语义，屏幕阅读器通常跳过或误读为普通容器。如果你还在老项目里看到它，替换时注意检查是否嵌套了<table> 或浮动元素——这些结构下 <code>text-align依然可靠，但<center></center>可能引发不可预测的渲染偏移。 - 正确做法：给
