盒子水平居中，使用margin:0 auto
<style>
.haha{
width: 500px;
height: 500px;
border: 1px solid #ccc;
margin: 0 auto;
}
</style>
<body>
<div class="haha">
</div>
</body>
盒子垂直居中，使用相对定位，以body为基准absolute，然后top:50%，但是盒子有高度所以还得margin-top:-100px，让盒子上移自己宽度的一半。
<style>
.haha{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
top: 50%;
margin-top: -100px;
}
</style>
<body>
<div class="haha">
</div>
</body>
综上，如果要让div垂直居中，水平居中，就使用相对定位，以body为基准absolute，top left 50%并且减掉自身的一半，代码如下
<style>
.haha{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
<body>
<div class="haha">
</div>
</body>
当使用插入图片的方式时，img是行内元素所以只需要使用text-align:center和行高等于高，就能使图片水平居中垂直居中。
<style>
.haha{
width: 500px;
height: 500px;
text-align: center;
line-height: 500px;
}
</style>
<body>
<div class="haha">
<img src="images/logo.png">
</div>
</body>
当使用背景图片水平居中，使用top center，代码如下：
<style>
.haha{
background:url(images/logo.png) no-repeat top center;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="haha">
</div>
</body>
当使用背景图垂直居中，代码如下，50%是参考值
<style>
.haha{
background:url(images/logo.png) no-repeat left 50%;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="haha">
</div>
</body>
背景图水平+垂直居中，如果需要图片全部铺满，则加上background-size: contain;
<style>
.haha{
background:url(images/logo.png) no-repeat center center;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="haha">
</div>
</body>
