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