当前位置：首页 > 前端开发 > 正文

HTML表格内容居中怎么设置？

admin
前端开发
2025-07-02
6

在HTML中设置表格内容居中，可通过CSS实现：为` 或 元素添加style=”text-align:center;” 实现水平居中；添加style=”vertical-align:middle;”`实现垂直居中，也可使用类或全局样式批量控制。

水平居中（最常用）

<style>
  td, th {
    text-align: center; /* 文字水平居中 */
  }
</style>
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td> <!-- 内容将居中显示 -->
    <td>25</td>
  </tr>
</table>

垂直居中

<style>
  td, th {
    height: 60px;     /* 设置行高 */
    vertical-align: middle; /* 文字垂直居中 */
  }
</style>

水平+垂直双居中

<style>
  td, th {
    text-align: center;
    vertical-align: middle;
    height: 60px;
  }
</style>

整表在页面居中

<style>
  table {
    margin: 0 auto; /* 表格整体水平居中 */
    width: 80%;     /* 需设置宽度 */
  }
</style>

Flexbox实现完美居中（推荐响应式布局）

<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
  <table>
    <tr><td>用Flex容器实现表格内容完全居中</td></tr>
  </table>
</div>

注意事项：

避免过时属性：
不要使用已废弃的HTML属性（如<td align="center">）,不符合现代网页标准。
优先使用CSS：
样式与结构分离便于维护，推荐使用外部样式表：
```
<link rel="stylesheet" href="styles.css">
```

响应式适配：
移动端建议添加媒体查询：

@media (max-width: 600px) {
  table { width: 100%; }
}

需求	方案	代码示例
文字水平居中	`text-align: center`	适用于`td/th`
文字垂直居中	`vertical-align: middle`	需设置`height`
表格整体居中	`margin: 0 auto`	需设置`width`
复杂布局	Flexbox/Grid	嵌套容器实现