使用CSS在表格单元格中对齐元素？

Question

我觉得很简单。我找到了一些使用float: right右对齐相似内容的答案。但是，我希望元素在单元格内居中。正如您所看到的，我可以使用HTML属性align来完成它，但我想知道如何使用CSS。

table {
  border-collapse: collapse;
}
td {
  height: 35px;
  width: 35px;
  border: 1px solid lightgray;
}
span {
  background-color: blue;
  border-radius: 50%;
  border: 1px solid black;
  width: 50%;
  height: 50%;
  display: block;
}

<table>
  <tr>
    <td align="center">
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
    <td>
      <span></span>
    </td>
  </tr>
</table>

Answer 1

这应该可以解决问题:(将margin: 0 auto添加到span）

table {
  border-collapse: collapse;
}
td {
  height: 35px;
  width: 35px;
  border: 1px solid lightgray;
}
span {
  background-color: blue;
  border-radius: 50%;
  border: 1px solid black;
  width: 50%;
  height: 50%;
  display: block;
  margin: 0 auto;
}

<table>
  <tr>
    <td><span></span>
    </td>
    <td><span></span>
    </td>
    <td><span></span>
    </td>
  </tr>
</table>