css td中div居中显示文字

在CSS中，我们常常会用到表格（table）来展现数据。而在表格的单元格（td）中，我们也经常会嵌套一个div来实现各种自定义样式。不过，有时候我们会发现div中的文字并不居中，出现了偏离左侧或右侧的情况。

那么，如何实现让div中的文字居中呢？下面就给大家介绍两种方法。

方法一：使用text-align

td div {
  text-align: center;
}

上述代码中，我们给td中的div添加了一个text-align属性，并将其值设置为center，即居中对齐。这种方法比较简单，但有一定局限性，就是只能实现div中文字水平居中，不能控制垂直居中。

方法二：使用display和height属性

td div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

上述代码中，我们通过给div添加height:100%属性，让其充满td单元格。然后，设置display:flex属性，让其采用flex布局。接着，使用justify-content:center和align-items:center属性，分别控制div中内容在水平和垂直上的居中对齐。

这种方法比第一种方法更加灵活，可以同时实现水平和垂直居中。但是，需要注意的是，如果td单元格的高度没有被设置为固定值，这种方法可能会出现div中文字溢出的情况。

以上，就是让td中div居中显示文字的两种方法。大家可以在具体情况下选择适合自己的方法来解决问题。