How to center a form/table with fieldsets in HTML-CSS and keep the size consistent?

Question

In HTML using the combination of <form> and <table>. It looks like this:

<form ...>
 <table>
   <tr>
    <td></td>
    <td></td>
   </tr>
   ...
   <tr>
    <td></td>
    <td></td>
   </tr>
 </table>
</form>

To place this form/table in the middle of the page, you can use the following CSS:

table {
   margin: 0px auto;
}

source:

• Center aligned HTML table

Until everything is ok.

When adding <fieldset> and legend to <form>, it is actually added to <table>middle. Therefore, the current structure is as follows:

<form ...>
<fieldset>
<legend>一些描述...</legend>
 <table>
   <tr>
    <td></td>
    <td></td>
   </tr>
   ...
   <tr>
    <td></td>
    <td></td>
   </tr>
 </table>
</fieldset>
</form>

There are two situations here:

1. How to make <fieldset>'s border the same size as the form/table itself?

The application is as follows:

fieldset {
     display: inline-block;
}

source:

• Is there a way to make the fieldset only as wide as the controls within it?

Even though it works as expected, <table> is still on the left.

question

• How to put a form/table with a fieldset in the middle while keeping the fieldset the same size as the form/table?

Answer 1

Such a thing?

form {
    display: table;
    margin: 0 auto;
}
table {
   margin: 0 auto;
}
fieldset {
   display: inline-block;
}

<form>
  <fieldset>
    <legend>一些描述...</legend>
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </fieldset>
</form>