css表格中的文字如何设置居中

# CSS表格中的文字如何设置居中

在网页设计中，表格（Table）是展示结构化数据的重要元素。而表格内容的对齐方式直接影响数据的可读性和视觉效果。本文将详细介绍如何通过CSS实现表格文字的**水平居中**和**垂直居中**，并附代码示例。

---

## 一、基础表格结构

首先看一个基础HTML表格结构：
```html
<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>左对齐数据</td>
    <td>右对齐数据</td>
  </tr>
</table>

默认情况下，<th>单元格文字居中，<td>单元格文字左对齐。

二、水平居中方案

1. text-align 属性

最基础的文字水平居中方法：

td, th {
  text-align: center;
}

效果：所有单元格文字水平居中

2. 特定列居中

如需单独控制某列：

/* 使用:nth-child选择器 */
td:nth-child(2) {
  text-align: center;
}

三、垂直居中方案

1. vertical-align 属性

控制单元格内文字的垂直对齐：

td, th {
  vertical-align: middle;
  height: 50px; /* 需要设置高度才能明显看到效果 */
}

可选值： - top 顶部对齐 - middle 垂直居中（最常用） - bottom 底部对齐

2. 配合行高(line-height)

当单元格为单行文本时：

td {
  line-height: 50px; /* 值等于单元格高度 */
}

四、完全居中方案（水平+垂直）

组合方案

table {
  width: 100%;
  border-collapse: collapse;
}
td, th {
  text-align: center;
  vertical-align: middle;
  padding: 8px;
  border: 1px solid #ddd;
}

Flexbox方案（现代浏览器）

td {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

五、响应式表格的特殊处理

当表格需要横向滚动时，建议固定表头并保持居中：

.table-container {
  overflow-x: auto;
}
th {
  position: sticky;
  top: 0;
  background: white;
}

六、注意事项

1. 优先级问题：内联样式 > ID选择器 > 类选择器 > 元素选择器
2. 继承特性：text-align会被子元素继承
3. 表格特有属性：vertical-align在表格单元格中表现与其他元素不同
4. 跨浏览器兼容：某些旧版本浏览器可能需要前缀

七、完整示例

<style>
  .centered-table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .centered-table td, 
  .centered-table th {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
    vertical-align: middle;
  }
  .centered-table th {
    background-color: #f2f2f2;
  }
</style>

<table class="centered-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>

通过以上方法，你可以轻松实现表格内容的完美居中显示。根据实际项目需求，选择最适合的技术方案即可。 “`