块级元素的水平居中，可以直接通过margin:0 auto;设置，非常简单。

块级元素的垂直居中，在已知元素与父级元素的高度时，可以通过设置父级元素的padding-top来实现。例如：

<style>
#wrapper{
    width:500px;
    height:300px;
    background:gray;
    padding-top:50px;
}
#inner{
    width:300px;
    height:200px;
    margin:0 auto;
    background:red;
}
</style>

<div id="wrapper">
    <div id="inner"></div>
</div>

要注意元素的盒子模型，当然是box-sizing:border-box;模型。