How to put table in the center of the page using CSS?

Edit for 2022: Flexbox Please

Use Flexbox, instructions here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

.box {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  width: 400px;
}

.box div {
  background-color: blue;
  width: 100px;
  height: 100px;
}
      
<div class="box">
  <div></div>
</div>
      

2021 answer preserved below.

html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

Example JSFiddle

Vertically aligning block elements is not the most trivial thing to do. Some methods below.

  • Understanding vertical-align, or “How (Not) To Vertically Center Content”
  • Vertical Centering in CSS

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)