title: Center Align Working in all Browsers but Chrome and Firefox
body: <p>I have this program which has 3 separate tables all inside a <code>&lt;div align="center"&gt;</code> tag. The first table is already displayed, however the next two only display if a button is pressed. Only the first table gets center aligned properly in Chrome, while the other two seem to be left aligned in Chrome. I tested this in Safari and IE and everything is properly aligned, however it is NOT in Chrome and Firefox. How can this be fixed?</p>
  
  <p>HTML for tables:</p>
  
  <pre><code>&lt;!-- 400 Rebate Tables --&gt;
  &lt;!-- 400P --&gt;
  
  &lt;div align="center" id="border"&gt;
  &lt;p&gt;
  &lt;div id="rebate_400p"&gt;
  &lt;strong&gt;400P&lt;/strong&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;table id="tables" cellspacing="5"&gt;
      &lt;tr align="center" class="table_titles"&gt;
          &lt;td&gt;Tier&lt;/td&gt;
          &lt;td&gt;Purchase Minimum&lt;/td&gt;
          &lt;td&gt;Multiplier&lt;/td&gt;
          &lt;td&gt;UOM&lt;/td&gt;
          &lt;td&gt;Retro&lt;/td&gt;
          &lt;td&gt;Guaranteed&lt;/td&gt;
          &lt;td&gt;Paid&lt;/td&gt;
          &lt;td&gt;Delete?&lt;/td&gt;
          &lt;td&gt;Add Row&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
              &lt;td align="center" name="tier"&gt;1&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="purchase_minimum" name="rows[0][0][purchase_minimum]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="multiplier" name="rows[0][0][multiplier]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="uom" name="rows[0][0][uom]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="retro"  name="rows[0][0][retro]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="guaranteed" name="rows[0][0][guaranteed]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="paid" name="rows[0][0][paid]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="delRow" value="Delete" onclick="deleteRow(this)"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="addmoreRowsbutton" value="Add row" onclick="insRow()"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/p&gt;
  
  &lt;!-- 400M --&gt;
  &lt;p&gt;
  &lt;div id="rebate_400m"&gt;
  &lt;strong&gt;400M&lt;/strong&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;table cellspacing="5" id="tables1" style="display: none;"&gt;
      &lt;tr align="center" class="table_titles"&gt;
          &lt;td&gt;Tier&lt;/td&gt;
          &lt;td&gt;Purchase Minimum&lt;/td&gt;
          &lt;td&gt;Multiplier&lt;/td&gt;
          &lt;td&gt;UOM&lt;/td&gt;
          &lt;td&gt;Retro&lt;/td&gt;
          &lt;td&gt;Guaranteed&lt;/td&gt;
          &lt;td&gt;Paid&lt;/td&gt;
          &lt;td&gt;Delete?&lt;/td&gt;
          &lt;td&gt;Add Rows&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
              &lt;td align="center" name="tier"&gt;1&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="purchase_minimum" name="rows[1][0][purchase_minimum]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="multiplier" name="rows[1][0][multiplier]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="uom" name="rows[1][0][uom]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="retro"  name="rows[1][0][retro]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="guaranteed" name="rows[1][0][guaranteed]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="paid" name="rows[1][0][paid]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="delRow" value="Delete" onclick="deleteRow(this)"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="addmoreRowsbutton" value="Add row" onclick="insRow1()"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- Button to display table for 400M --&gt;
  &lt;input type="button" name="row" value="+" onclick="show2();"/&gt;
  &lt;/p&gt;
  
  &lt;!-- 400D --&gt;
  
  &lt;p&gt;
  &lt;div id="rebate_400d"&gt;
  &lt;strong&gt;400D&lt;/strong&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;table cellspacing="5" id="tables2" style="display: none;"&gt;
      &lt;tr align="center" class="table_titles"&gt;
          &lt;td&gt;Tier&lt;/td&gt;
          &lt;td&gt;Purchase Minimum&lt;/td&gt;
          &lt;td&gt;Multiplier&lt;/td&gt;
          &lt;td&gt;UOM&lt;/td&gt;
          &lt;td&gt;Retro&lt;/td&gt;
          &lt;td&gt;Guaranteed&lt;/td&gt;
          &lt;td&gt;Paid&lt;/td&gt;
          &lt;td&gt;Delete?&lt;/td&gt;
          &lt;td&gt;Add Rows&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
              &lt;td align="center" name="tier"&gt;1&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="purchase_minimum" name="rows[2][0][purchase_minimum]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="multiplier" name="rows[2][0][multiplier]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="uom" name="rows[2][0][uom]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="retro"  name="rows[2][0][retro]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="guaranteed" name="rows[2][0][guaranteed]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" class="rebate_tables" data-name="paid" name="rows[2][0][paid]"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="delRow" value="Delete" onclick="deleteRow(this)"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" class="addmoreRowsbutton" value="Add row" onclick="insRow2()"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  &lt;!-- Button to adisplay table for 400D --&gt;
  &lt;input type="button" name="row" value="+" id="plus-button" onclick="show3();"/&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>/* Takes away individual border around each and every cell */
  
  table {
      border-collapse: collapse;
  }
  
  /* Makes 400p, 400m, 400d heading text bold */
  
  .table_titles {
      font-weight: bold;
  }
  
  /* Center aligns everything inside the 400p, 400m, 400d tables */
  
  .rebate_tables {
      align-content: center;
      display: block;
      margin: auto;
  }
  
  #rebate_400p, #rebate_400m, #rebate_400d {
      border-radius: 5px;
      border-top: 1px solid #9a9a9a;
      border-right: 1px solid #9a9a9a;
      display: block;
      height: 20px;
      margin: 1.5;
      width: 46px;
      background-color: seagreen;
      color:white;
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
  }
  
  /* Border around 400p, 400m, 400d table */
  
  #border {
      background-color: whitesmoke;
      padding: 5px;
      border-style: solid;
      border-color: black;
      margin-left: 20px;
      margin-right: 20px;
  }
  
  #plus-button {
      margin-bottom: 5px;
  }
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Screenshot of what it looks like:
  <a href="https://i.stack.imgur.com/oZAUW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oZAUW.png" alt="enter image description here"></a></p>