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> 加 margin: 0 auto 没反应？大概率是没设宽度或被其他样式干扰了。
-
<table>默认是块级框，但margin: 0 auto要求它有明确宽度（不能是width: 100%或未声明） - 错误写法：
<table style="margin: 0 auto;">→ 缺 width，浏览器无法计算左右空隙 - 正确写法：
<table style="width: 80%; margin: 0 auto;">或响应式写法：width: 100%; max-width: 768px; margin: 0 auto; - 别用
align="center"—— HTML5 已废弃，Chrome/Firefox 解析不一致，W3C 验证器报错 - 如果父容器是
display: flex或display: grid，margin: 0 auto会被忽略，此时得改用父容器的justify-content: center
td/th 里的文字怎么居中？只认 text-align，不是 align 属性
text-align: center 必须作用在 <td> 或 <th> 上，写在 <table> 或 <tr> 上完全无效。
- 错误：
<table style="text-align: center;">→ 表格内文字不动 - 正确：
<td style="text-align: center; vertical-align: middle;">内容</td> - 整表统一控制：
table td, table th { text-align: center; vertical-align: middle; } -
vertical-align: middle要生效，单元格得有足够高度支撑（靠padding比硬设height更稳） - 如果
<td>里嵌了<div style="display: block;">，text-align不会穿透进去，那个<div>得自己加margin: 0 auto或display: flex
img/p 等行内元素怎么居中？text-align 必须写在父容器上
给 <img> 自己加 text-align: center 是徒劳的——这个属性只对**父容器**生效，且只影响它的**行内级子元素**。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<div style="text-align: center;"><img src="a.jpg"></div> -
<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> 确实能居中，但容易踩坑。
- Flex 写法：
<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仍是首选
最易被忽略的一点：所有居中方案都依赖上下文。同一个 text-align: center，在普通 <div> 里有效，在 display: flex 父容器里就彻底失效；margin: 0 auto 看似简单，但只要父容器有 overflow: hidden 或子元素用了 float，它就立刻失灵。调试时优先检查“谁是父容器”和“它的 display 是什么”。
