Aligning a table in the DEAD CENTER-CodePudding

I have a table that needs to be aligned in the dead center of the page. But I can't figure out how to align it vertically.

What is the efficient way to do this?

#textcenter {
  vertical-align: middle;
  display: table-cell;
  background-color: #DCDCDC;
  border-radius: 25px;
  margin: auto;
}

<table ALIGN="center" id="textcenter">
  <th>Hello</th>
</table>

CodePudding user response：

If you want it to be on the center of the page no matter what. Use absolute:

.center{
  /* Center Code */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* Your Code */
  background-color: #DCDCDC;
  border-radius: 25px;
  margin: auto;
  /* Improved Styling - You can ignore this */
  padding: 5px;
}

<table >
  <th>Hello</th>
</table>

You can also create a flex container on the outside.

CodePudding user response：

Assuming your table has a fixed width and height...

You can use the 'margin' property with a value of 'auto' to center the table horizontally and vertically on the page:

<style>
  .center {
    margin: auto;
  }
</style>

<table >
  <tr>
    <td>Table cell</td>
  </tr>
</table>

Alternatively, the 'text-align' and 'vertical-align' properties will center the table horizontally and vertically within its parent element, respectively:

<div style="text-align: center; vertical-align: middle;">
  <table>
    <tr>
      <td>Table cell</td>
    </tr>
  </table>
</div>

If your table's width and height are not fixed, it will expand to fit the contents, and may not be exactly centered. In this case, you can use the 'display: flex' and 'align-items: center' properties to center the table within its parent element:

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>

<div >
  <table>
    <tr>
      <td>Table cell</td>
    </tr>
  </table>
</div>