html表格水平居中必须设置width（如width: 80%或max-width: 768px）并配合margin: 0 auto；align="center"已废弃，不可靠；td/th内文字居中需在单元格上设text-align: center，而非table或tr。
HTML 标签本身不能“居中”，真正起作用的是它渲染出的元素及其 CSS 布局行为。居中分两类：**元素在页面中居中（位置居中）** 和 **元素内部文字/子内容居中（内容居中）**，两者机制完全不同，混用就会失效。
table 元素怎么水平居中？必须设 width + margin: 0 auto
直接给 <table> 加 <code>margin: 0 auto 没反应？大概率是没设宽度或被其他样式干扰了。
<table> 默认是块级框，但 <code>margin: 0 auto要求它有明确宽度（不能是width: 100%或未声明）- 错误写法：
<table style="margin: 0 auto;"> → 缺 width，浏览器无法计算左右空隙<li>正确写法：<code><table style="width: 80%; margin: 0 auto;"> 或响应式写法：<code>width: 100%; max-width: 768px; margin: 0 auto; - 别用
align="center"—— HTML5 已废弃，Chrome/Firefox 解析不一致，W3C 验证器报错 - 如果父容器是
display: flex或display: grid，margin: 0 auto会被忽略，此时得改用父容器的justify-content: center - 整表统一控制：
table td, table th { text-align: center; vertical-align: middle; } -
vertical-align: middle要生效，单元格得有足够高度支撑（靠padding比硬设height更稳） - 如果
<td> 里嵌了 <code><div style="display: block;">，<code>text-align不会穿透进去，那个<div> 得自己加 <code>margin: 0 auto或display: fleximg/p 等行内元素怎么居中？text-align 必须写在父容器上
给
@@##@@自己加text-align: center是徒劳的——这个属性只对**父容器**生效，且只影响它的**行内级子元素**。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确：
<div style="text-align: center;">@@##@@</div> -
<p></p>默认块级，但里面文字是行内内容，所以同样受父容器text-align控制 - 如果父容器用了
display: flex或display: grid，text-align直接失效，得换justify-content或place-items - 想让图片自身居中（比如作为独立块），得先设
display: block，再配margin: 0 auto，且必须有明确宽度
flex/grid 居中表格要注意语义破坏风险
用
display: flex或display: grid的父容器包裹<table> 确实能居中，但容易踩坑。<ul> <li>Flex 写法：<code><div style="display: flex; justify-content: center;"><table></table></div> - 正确：
- Grid 写法：
<div style="display: grid; place-items: center;"><table></table></div> - 问题：表格设了
width: 100%时，在 flex/grid 容器里会被拉伸变形，建议改用max-width: fit-content - 更隐蔽的问题：
colspan/rowspan在某些打印预览或屏幕阅读器中可能渲染异常，语义完整性受损 - IE11 不支持
place-items，如需兼容老环境，margin: 0 auto仍是首选
td/th 里的文字怎么居中？只认 text-align，不是 align 属性
text-align: center 必须作用在 <td> 或 <code><th> 上，写在 <code><table> 或 <code><tr> 上完全无效。<ul><li>错误：<code><table style="text-align: center;"> → 表格内文字不动<li>正确：<code><td style="text-align: center; vertical-align: middle;">内容</td>
最易被忽略的一点：所有居中方案都依赖上下文。同一个 text-align: center，在普通 <div> 里有效，在 <code>display: flex 父容器里就彻底失效；margin: 0 auto 看似简单，但只要父容器有 overflow: hidden 或子元素用了 float，它就立刻失灵。调试时优先检查“谁是父容器”和“它的 display 是什么”。
