text-align: center 必须作用于td或th元素，不能直接写在table上；正确做法是为td、th设置text-align: center和vertical-align: middle组合样式，或通过CSS选择器统一控制。
text-align: center 必须作用在 td 或 th 上，不是 table
直接给 table 标签加 style="text-align: center" 是无效的。因为 text-align 控制的是“块级容器内行内内容”的水平对齐，而表格单元格里的文字实际在 td 或 th 里，table 本身并不承载文本流。
常见错误现象：<table style="text-align: center"><tr><td>文字</td></tr></table> → 文字依然靠左。
- 正确写法：在每个
td或th上设style="text-align: center" - 更合理做法：用 CSS 选择器统一控制，比如
table td, table th { text-align: center; } - 别漏掉
th—— 否则表头仍默认左对齐
整表批量设置水平居中，推荐用 CSS 类而非内联样式
如果多个表格或大量单元格都需要水平居中，硬写内联样式既难维护又易出错。用类名封装是最轻量、最可控的方式。
使用场景：后台管理页的列表表格、数据报表、带筛选条件的展示表等。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 定义类：
.text-center { text-align: center; } - 应用到单元格：
<td class="text-center">2026-10-27</td> - 若想全局生效（不改 HTML），可用
table.data-table td, table.data-table th这类带命名空间的选择器，避免污染其他表格
为什么加了 text-align: center 还是没居中？检查这三点
不是样式没写，而是被更高优先级规则覆盖，或结构/显示模式干扰了效果。
-
td内部嵌套了div或span，且该元素设置了text-align: left或display: block+width: 100%——text-align不会自动继承穿透，需显式重设 - 用了
float、position: absolute或display: flex的子元素，它们脱离了普通文档流，text-align对其内部对齐无影响 - CSS 优先级问题：比如某框架 CSS 中写了
td { text-align: left !important; }，会盖掉你的居中声明
和垂直居中搭配时，vertical-align: middle 不能省
只设水平居中，文字常卡在单元格顶部——尤其当单元格有 padding 或多行内容时，视觉上明显偏上。
必须同时加 vertical-align: middle 才算真正“居中对齐”。注意它只对 td 和 th 有效，对 tr 或 table 加无效。
- 推荐组合写法：
td, th { text-align: center; vertical-align: middle; } - 若单元格高度受限（如
height: 24px），vertical-align: middle可能看起来“不够中”，这时优先调大padding（如padding: 4px 8px），比硬撑height更可靠 - 不要用
line-height模拟垂直居中——它只对单行有效，且和字体大小耦合强，响应式下容易崩
vertical-align，但一旦你为了“更好控制”把 td 改成 display: flex，就等于放弃表格结构意义，屏幕阅读器可能无法识别行列关系。真要二维居中，前提是确认这张表只是视觉展示，没有数据逻辑需求。 
