如何将css表对齐到中心[重复]

Question

我目前在使用 display: table 对齐的输入表单方面遇到问题。我使用display: table-row 和display: table-cell 将每个部分放入自己的区域。这使我的输入表单看起来很干净，但唯一的问题是我无法终生将表单与页面中心对齐。我也在使用引导程序。 下面是表单的html代码：

.addPlayerForm form {
  text-align: center;
}

.addPlayerForm {
  display: table;
  padding: 25px;
  text-align: center;
  position: center;
  display: inline-flex;
}

.addPlayerForm .form-row {
  display: table-row;
}

.addPlayerForm label {
  display: table-cell;
}

.addPlayerForm input {
  display: table-cell;
  width: 300px;
}

.addPlayerForm select {
  width: 300px;
}

<div class="addPlayerForm">
  <form method="post" action="">
    <div class="form-row">
      <input type="text" name="FirstName" align="center"><br>
    </div>
    <div class="form-row">
      <input type="text" name="LastName"><br>
    </div>
    <div class="form-row">
      <input type="date" name="DOB"><br>
    </div>
    <div class="form-row">
      <select name="MemberType">
        <option value="0" selected="">Please Select a Membership Type</option>
        <option value="1">Junior</option>
        <option value="2">Senior</option>
        <option value="3">VP</option>
        <option value="4">Ladies</option>
        <option value="5">Social</option>
        <option value="6">Girls</option>
        <option value="7">Colts</option>
      </select><br>
    </div>
    <div class="form-row">
      <select name="ContactType">
        <option value="0" selected="">Please Select a Contact Type</option>
        <option value="1">Email</option>
        <option value="2">Phone</option>
      </select><br>
    </div>
    <div class="form-row">
      <input type="text" name="ContactInfo"><br>
    </div>
    <button class="btn btn-dark" type="submit">Submit</button>
  </form>
</div>

如果有人能够帮助我解决这个问题，我将非常感激。提前致谢。

Answer 1

margin:0 auto;的使用

更改：

.addPlayerForm {
  display: table;
  padding: 25px;
  text-align: center;
  position: center;
  display: inline-flex;
}

收件人：

.addPlayerForm {
  display: table;
  padding: 25px;
  margin:0 auto;
}

.addPlayerForm form {
  text-align: center;
}

.addPlayerForm {
  display: table;
  padding: 25px;
  margin:0 auto;
}

.addPlayerForm .form-row {
  display: table-row;
}

.addPlayerForm label {
  display: table-cell;
}

.addPlayerForm input {
  display: table-cell;
  width: 300px;
}

.addPlayerForm select {
  width: 300px;
}

<div class="addPlayerForm">
        <form method="post" action="">
                <div class="form-row">
                    <input type="text" name="FirstName" align="center"><br>
                </div>
                <div class="form-row">
                    <input type="text" name="LastName"><br>
                </div>
                <div class="form-row">
                    <input type="date" name="DOB"><br>
                </div>
                <div class="form-row">
                    <select name="MemberType">
                        <option value="0" selected="">Please Select a Membership Type</option>
                        <option value="1">Junior</option>
                        <option value="2">Senior</option>
                        <option value="3">VP</option>
                        <option value="4">Ladies</option>
                        <option value="5">Social</option>
                        <option value="6">Girls</option>
                        <option value="7">Colts</option>
                    </select><br>
                </div>
                <div class="form-row">
                    <select name="ContactType">
                        <option value="0" selected="">Please Select a Contact Type</option>
                        <option value="1">Email</option>
                        <option value="2">Phone</option>
                    </select><br>
                </div>
                <div class="form-row">
                    <input type="text" name="ContactInfo"><br>
                </div>
            <button class="btn btn-dark" type="submit">Submit</button>
        </form>
    </div>