使用CSS的text-align和vertical-align属性可实现表格内容居中。首先设置text-align: center实现水平居中，作用于table、th、td或单个单元格；其次通过vertical-align: middle实现垂直居中，仅适用于td和th标签。推荐使用外部CSS类统一控制样式，如定义.center-all类应用到单元格，避免依赖浏览器默认行为，确保跨浏览器一致性。
要让HTML表格中的内容居中对齐，可以通过CSS来设置文本的对齐方式。默认情况下，表格内容通常是左对齐的，但使用简单的CSS样式即可实现水平和
垂直居中
。
1. 水平居中：text-align
控制表格内文字的水平对齐方式，使用text-align: center;可使内容在单元格内水平居中。
可以应用于整个表格、某一行或单个单元格：
对所有单元格生效：
仅对表头居中：
只对特定单元格设置：
在标签中添加内联样式
table, th, td { text-align: center; }th { text-align: center; }
2. 垂直居中：vertical-align
若想让内容在单元格内垂直居中，使用vertical-align: middle;。
注意：该属性在
td
和
th
中有效，但不能直接用于
table
标签。
统一设置所有单元格垂直居中：
td, th { vertical-align: middle; }
个别单元格设置：
3. 使用内联样式或外部CSS
推荐使用外部CSS以保持代码整洁，但测试时可用内联样式快速查看效果。
示例：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
姓名
张三
更优做法是定义CSS类：
内容
4. 注意事项
某些浏览器默认对th（表头）内容加粗并居中，而td默认左对齐且不加粗。
为确保一致性，建议显式设置所有对齐样式，避免依赖默认行为。
基本上就这些方法，掌握
text-align
和
vertical-align
就能灵活控制表格内容的对齐方式。
相关文章