CSS设置块级元素(div)水平垂直居中

块级元素的水平居中,可以直接通过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;模型。