如何将 HTML 表格居中

在网页设计中，让 HTML 表格居中是一个常见需求。合理地将表格居中可以显著提升页面的整体美观度和用户体验。下面就为大家详细介绍几种实现 HTML 表格居中的方法。

水平居中表格

1. 使用 text-align:center：将表格放在一个父元素中，比如 <div> 标签里，然后对父元素设置 text-align:center 样式。示例代码如下：

<div style="text-align:center;">
    <table>
        <tr>
            <td>单元格内容 1</td>
            <td>单元格内容 2</td>
        </tr>
    </table>
</div>

这种方法是利用文本在容器内水平居中的原理，将表格作为一个整体进行水平居中。

2. 使用 margin:0 auto：直接对表格元素设置 margin:0 auto。代码如下：

<table style="margin:0 auto;">
    <tr>
        <td>单元格内容 1</td>
        <td>单元格内容 2</td>
    </tr>
</table>

这里 margin:0 auto 的作用是将表格左右的外边距设置为自动，从而使表格在其父元素中水平居中。

水平和垂直都居中表格

1. 使用 Flexbox：Flexbox 是一种强大的布局模式。为父元素设置 display:flex，然后使用 justify-content:center 实现水平居中，align-items:center 实现垂直居中。示例如下：

<div style="display:flex; justify-content:center; align-items:center;">
    <table>
        <tr>
            <td>单元格内容 1</td>
            <td>单元格内容 2</td>
        </tr>
    </table>
</div>

2. 使用绝对定位和负边距：先将父元素设置为 position:relative，表格设置为 position:absolute。通过计算表格宽度和高度的一半，使用负边距将表格向上和向左移动自身宽度和高度的一半，从而实现水平和垂直居中。代码如下：

<div style="position:relative;">
    <table style="position:absolute; top:50%; left:50%; margin-top:-表格高度的一半; margin-left:-表格宽度的一半;">
        <tr>
            <td>单元格内容 1</td>
            <td>单元格内容 2</td>
        </tr>
    </table>
</div>

通过上述不同的方法，我们可以根据实际需求灵活选择，轻松实现 HTML 表格在页面中的水平或水平与垂直方向的居中显示，打造出更具美感和实用性的网页布局。