如何将含fieldset的form/table居中且fieldset与表单/表格同宽？

问题场景 #

原本<form>嵌套<table>的结构，通过以下CSS可实现表格居中：

<form>
  <table>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <!-- 更多表格行 -->
  </table>
</form>

table {
  margin: 0px auto;
}

当为表格添加<fieldset>和<legend>后，结构变为：

<form>
  <fieldset>
    <legend>表单说明</legend>
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <!-- 更多表格行 -->
    </table>
  </fieldset>
</form>

此时用fieldset { display: inline-block; }可以让fieldset边框与table同宽，但table会左对齐，需要同时实现整体居中和fieldset与table同宽的效果。

解决方案 #

方案一：父元素文本居中+表格文本重置 #

form {
  text-align: center;
}
fieldset {
  display: inline-block;
  padding: 0; /* 可选，移除默认内边距让边框更贴合table */
}
table {
  text-align: left; /* 重置表格内容对齐，避免继承form的居中样式 */
}

• 逻辑：text-align:center会让inline-block类型MD host重点OGitercontinental有多 pressingtern2 bou Showing 'form'会让inline-block的fieldset在父容器内居中，给table设置text-align:left保证表格内的内容不会跟着居中。

方案二：让fieldset宽度自适应并直接居中 #

fieldset {
  display: table; /* 或inline-table，自动适配内部table的宽度 */
  margin: 0 auto;
  padding: 0; /* 可选，移除默认内边距 */
}

• 逻辑：display:table会让fieldset的宽度自动收缩到内部table的宽度，再通过margin:0 auto实现整体居中，无需修改form或table的文本对齐样式。

内容的提问来源于stack exchange，提问作者Manuel Jordan