html - 文本在 1cm x 1cm 单元格中居中

Question

我想创建一个包含 3 个单元格的表格。第二个单元格必须居中，宽度为 1 厘米，高度为 1 厘米。第二个单元格中的文本必须水平/垂直居中:

我几乎成功了，但即使经过多次尝试，我也绝对无法让文本出现在第二个单元格的中间:

<table>
  <tr>
    <td style="width:50%;"></td>
    <td style="min-width:1cm;max-width:1cm;border:none">
      <div style="min-height:1cm;max-height:1cm;background-color:red">
        <span class="PageNumber">1</span>
      </div>
    </td>
    <td style="width:50%;"></td>
  </tr>  
</table>

如何让 span 占据整个 div 容器，以便让文本(垂直和水平)居中？

注意:实际代码更复杂，我刚刚提取了导致问题的部分(在 1x1 厘米单元格中居中文本)。

Answer 1

除了表格应该只用于表格数据这一事实之外，您可以使用 display:flex 实现您想要的:

.number {
  display: flex;
  min-height: 1cm;
  max-height: 1cm;
  background-color: red;
  align-items: center;
  justify-content: center;
}

<table>
  <tr>
    <td style="width:50%;"></td>
    <td style="min-width:1cm;max-width:1cm;border:none">
      <div class="number">
        1
      </div>
    </td>
    <td style="width:50%;"></td>
  </tr>
</table>