表格单元格内容水平居中用text-align: center；该属性作用于单元格内行内内容（如文字、图片），需写在或上，旧式align="center"已废弃，现代项目应避免使用。

表格单元格内容水平居中用什么CSS属性？

直接用 text-align: center，不是 align 属性（HTML旧属性已废弃，现代项目里别碰）。text-align 作用于行内内容（文字、图片、inline元素），对 <td> 或 <code><th> 设置就生效。 <p>常见错误是写成 <code>align="center" —— 这在HTML5里不推荐，且无法控制子元素（比如里面嵌了个 <div> 就失效）。 <ul> <li>只对当前单元格生效：<code><td style="text-align:center">文本</td>

批量控制整列：给 <col> 加样式，或用CSS选择器如 td:nth-child(2)

如果单元格里有块级元素（如 <div>），它默认不响应 <code>text-align，得额外设 margin: 0 auto 或用 Flex

为什么设置了 text-align 却没居中？

大概率是内容本身“不买账”——比如单元格里放了 <div style="display:block">，它撑满父容器宽度，<code>text-align 对它内部文字有效，但对它自己无效。

典型场景：表格里塞按钮、卡片、自定义组件，它们常带 display: block 或固定宽度。

• 解决办法一（简单）：给那个块级子元素加 margin: 0 auto（前提是它有明确宽度）
• 解决办法二（通用）：把 td 设为 Flex 容器：style="display:flex; justify-content:center;"
• 别用 float 或 position: absolute 居中，会破坏表格流布局，容易错位

table-layout: fixed 会影响居中效果吗？

不影响 text-align 本身，但会影响视觉表现。开启 table-layout: fixed 后，单元格宽度由第一行决定，后续行内容超长会被截断或换行，可能让“居中”看起来偏移。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 确认是否真需要 table-layout: fixed：仅当要严格控列宽、防内容撑开表格时才用
• 如果用了，记得给 td 设 white-space: nowrap 或 overflow: hidden 配合居中，避免文字折行破坏对齐
• 移动端尤其注意：小屏幕下 fixed 布局 + 居中 + 换行，容易出现意料外的空隙或溢出

td 和 th 的居中写法有区别吗？

没有本质区别。th 默认有 text-align: center（浏览器 UA 样式），但这是“默认值”，不是“强制行为”。一旦你写了 th { text-align: left } 全局重置，th 就和 td 一样了。

• 别依赖默认居中，显式写 th, td { text-align: center } 更可靠
• 如果表头要左对齐、内容右对齐，分开写更安全：th { text-align: left; }，td:nth-child(3) { text-align: right; }
• 注意 th 的 scope 属性和语义，居中只是样式，不影响可访问性

实际最简可行代码就是：

姓名

操作

真正麻烦的从来不是怎么写居中，而是居中之后，内容本身有没有破坏表格结构——比如图片没设 max-width: 100%，或者子容器用了 position: relative 又没配 left: 50%，这些细节比居中本身更常导致对不齐。