How to align css table to center

Question

I am currently having issues with an input form that I have aligned using display: table. I have each sections put into their own areas using display: table-row and also display: table-cell. This makes my input form look clean, but the only problem is that I cannot for the life of me align the form into the centre of the page. I am also using bootstrap. Below is the html code for the form:

.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>

if anyone is able to assist me with this I would be extremely appreciative. Thanks in advance.

Does this answer your question? [How to put table in the center of the page using CSS?](https://stackoverflow.com/questions/9402856/how-to-put-table-in-the-center-of-the-page-using-css) — AAM111, Jan 21 '20 at 01:55

score 1 · Accepted Answer · answered Jan 21 '20 at 01:50

Use of margin:0 auto;

Change :

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

To:

.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>

Thank you so much. I was stressing out at 3AM so probably didn't see this solution. Solved! — Kuritsu, Jan 21 '20 at 12:09

How to align css table to center

1 Answers1