text-align: center仅使行内内容水平居中，不居中块级容器自身；align="center"和标签在HTML5中已废弃；失效常见原因包括父容器为flex、子元素脱离文档流、父宽为0或子元素为块级；垂直居中推荐用Flex布局。
直接给父容器加 text-align: center 就能解决绝大多数文字水平居中需求，但这个属性只控制内部行内内容（比如文字、span、图片）的对齐，不改变容器自身位置——别指望它让整个 div 飘到页面正中间。
为什么 align="center" 和 <center></center> 不能用
HTML 中的 align 属性（如 <h2 align="center"></h2>）和 <center></center> 标签在 HTML5 中已被正式废弃。现代浏览器虽可能仍渲染，但 W3C 不再支持，部分严格模式或新版本解析器会忽略，CI/CD 流水线里的 HTML 验证工具也会报错。实际项目里混用容易导致样式不可控，尤其在多人协作或组件复用时。
text-align: center 失效的常见原因
这个声明看似简单，但经常“没反应”，通常是因为：
- 父容器用了
display: flex—— 此时text-align完全失效，必须改用justify-content: center - 子元素设置了
float或position: absolute—— 脱离文档流后，text-align失去作用对象 - 父容器宽度为
0或未定义（比如空div无内容又没设width/min-width）—— 没有可对齐的“行框” - 子元素是块级且未包裹在行内上下文中（例如直接放一个
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>在<div> 里，而 <code><p></p>自身是块级）——text-align仍生效，但只影响<p></p>内部文字；若想让<p></p>整体居中，得另想办法需要垂直居中？别硬套
line-height单行定高文本可用
line-height等于容器高度来垂直居中，但这是个脆弱方案：立即学习“前端免费学习笔记（深入）”；
- 一旦字体缩放、响应式字号变化或内容变成两行，
line-height就会撑开容器或截断文字 - 它依赖绝对像素值，和
em/rem单位配合时行为难预测 - 真正可靠的垂直+水平居中，请用 Flex：给父容器加
display: flex、justify-content: center、align-items: center，并确保它有明确高度（如min-height: 100vh或固定height）
Flex 的兼容性已覆盖 IE11+，日常项目中几乎不用再考虑降级到
position: absolute+transform这种写法——除非你正在维护一个必须支持 IE9 的老系统。 - 一旦字体缩放、响应式字号变化或内容变成两行，
