表格文字不居中需同时设置text-align: center和vertical-align: middle；推荐用CSS类统一控制，避免内联样式或全局污染，并检查padding、box-sizing及direction等干扰因素。
table单元格文字不居中？先检查text-align和vertical-align
表格里文字默认既不水平居中也不垂直居中，常见表现是文字贴左上角。这不是浏览器bug，而是<td>和<th>的默认样式就是text-align: left、vertical-align: middle——注意：垂直方向默认其实是middle，但常被父级line-height或内容高度干扰，导致看起来没居中。
实操建议：
- 水平居中必须显式写
text-align: center，不能依赖“默认” - 垂直居中优先用
vertical-align: middle，但只对inline、table-cell等元素生效；<td>天然是table-cell，所以直接设有效 - 避免给
<td>设height后又不配line-height，否则文字会偏上
用CSS类统一控制比内联style更可靠
在index.html里给每个<td>加style="text-align:center;vertical-align:middle"能临时见效，但难维护、易遗漏。推荐在<head>里加一段<style>：
<style>
table.centered td,
table.centered th {
text-align: center;
vertical-align: middle;
}
</style>然后给<table>加class="centered"。这样后续增删行/列都不用重复写样式。
立即学习“前端免费学习笔记（深入）”；
注意点：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 别写成
table td { ... }全局影响——页面可能有其他不需要居中的表格 - 如果用了Bootstrap等框架，它的
table类可能已覆盖部分样式，需用!important或提高选择器权重（比如加table.centered tbody td）
遇到文字被截断或撑高单元格？检查padding和box-sizing
即使text-align和vertical-align都设对了，文字仍可能“看起来没居中”，典型原因是：padding不对称，或box-sizing为content-box导致尺寸计算混乱。
排查步骤：
- 用浏览器开发者工具选中
<td>，看Computed面板里padding是否上下左右一致（比如都是8px） - 确认没有意外设置
padding-top: 0之类破坏对称性的规则 - 若表格有固定高度且内容多行，
vertical-align: middle对多行文本效果有限，此时考虑用display: flex替代（但需改DOM结构，兼容性要求IE10+）
移动端适配时，text-align可能被direction或rtl影响
如果表格在手机上文字突然右对齐，检查是否父容器或<html>有dir="rtl"，或CSS里写了direction: rtl。这时text-align: center依然有效，但text-align: left会变成“视觉上的右对齐”。
稳妥做法：
- 明确重置方向：
table.centered { direction: ltr; } - 避免在
<body>或全局* {}里设direction，除非真做双语站 - 不要依赖
text-align: start/end——它们受direction影响，在简单居中场景反而增加不确定性
真正麻烦的不是写两行CSS，而是居中效果被其他层叠样式悄悄覆盖。每次调不好，先禁用所有外部CSS，再一行行开回来定位冲突源。
