html - 如何在td中的绝对div中居中显示文本？

在我的项目中，有一个html表，每个td都包含一个div。我必须将div设置为适合td，因此我将td的位置设置为相对，而div的位置设置为绝对。

请考虑下表及其样式：

table {
  width: 500px;
  height: 600px;
}
table td {
  position: relative;
}
table td div {
  position: absolute;
  backgroundcolor: red;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<table id="theTable">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>
      <div>a1</div>
    </td>
    <td>
      <div>b2</div>
    </td>
    <td>
      <div>c2</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>a2</div>
    </td>
    <td>
      <div>b2</div>
    </td>
    <td>
      <div>c2</div>
    </td>
  </tr>
</table>

上面的样式表非常适合满足我的期望。接下来，我想将绝对div中的文本设置为居中（垂直包括）。

因此，我在互联网上找到了它，其中大多数人建议为该div提供display: table;样式。显然，它失败了：(

能告诉我如何将这些文本居中吗？

最佳答案

只需将text-align: center;添加到CSS table td div{ ... }

例：
https://jsfiddle.net/9kznm317/

关于html - 如何在td中的绝对div中居中显示文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40258850/