html - 居中表格

Question

我试图将表单居中放置在页面中间。目前，我正在使用 div 并将表单放入其中。 div 居中但不是 div 内的表单。这是我的 HTML 和 CSS 的一部分。

    form {
    margin: auto;
    }

     .wrapper {
    margin: auto;
    width: 50%;
    padding: 0px;
    display: table;
    }


    fieldset {

    margin: 1em;
    padding: 1em;
    border-color: crimson;
    border-radius: 20px;
    border-style: double;
    border-width: 10px;
    width: 70%;
    }

 <div class="wrapper">
        <form id="form1">
            <fieldset>
                <legend>Your contact details</legend>
                <p class="formtext">Name <em>(required)</em></p>
                <input type="text" id="name" required placeholder="Forname & Surname" />
                <p class="formtext">Email Address <em>(required)</em></p>
                <input type="text" id="email" required placeholder="example@example.com" />
                <p class="formtext">Website Address</p>
                <input type="text" id="url" placeholder="https:www.example.com" />
                <p class="formtext">Message</p>
                <textarea id="message" required></textarea>
                <p class="formtext">Would you like to recieve regular email updates?</p>
                <select name="cars">
                    <option value="yes">Yes</option>
                    <option value="no">No</option>

                </select>

            </fieldset>
            <fieldset>
                <legend>Would you like more information?</legend>
                <label class="button" for="information-yes">
                    <input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
                <label class="button" for="information-no">
                    <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
            </fieldset>
            <input type="submit" value="Click to send" />
        </form>
    </div>

Answer 1

在表单标签中添加text-align: center;

form {
  margin: auto;
  text-align: center;
}
.wrapper {
  margin: auto;
  width: 50%;
  padding: 0px;
  display: table;
}

fieldset {
  margin: 1em;
  padding: 1em;
  border-color: crimson;
  border-radius: 20px;
  border-style: double;
  border-width: 10px;
  width: 70%;
}

<div class="wrapper">
  <form id="form1">
    <fieldset>
      <legend>Your contact details</legend>
      <p class="formtext">Name <em>(required)</em></p>
      <input type="text" id="name" required placeholder="Forname & Surname">
      <p class="formtext">Email Address <em>(required)</em></p>
      <input type="text" id="email" required placeholder="example@example.com">
      <p class="formtext">Website Address</p>
      <input type="text" id="url" placeholder="https:www.example.com">
      <p class="formtext">Message</p>
      <textarea id="message" required></textarea>
      <p class="formtext">Would you like to recieve regular email updates?</p>
      <select name="cars">
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </fieldset>
    <fieldset>
      <legend>Would you like more information?</legend>
      <label class="button" for="information-yes">
        <input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
        <label class="button" for="information-no">
          <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
    </fieldset>
    <input type="submit" value="Click to send" />
  </form>
</div>