CSS_垂直水平居中

/*
 * 经典版,第一次看到的是在一个淘宝的面试题上.
 */
<style type="text/css">
.main{width:500px;height:400px;margin:100px auto 0 auto;}
.imgbox{width:500px;height:400px;display:table-cell;vertical-align:middle;background:#CCC;text-align:center;overflow:hidden;*display:block;*font-size:350px;*font-family:Arial;}
.imgbox img{*vertical-align:middle;}
</style>
<div class="main">
 <div class="imgbox">
  <img src="img/i01.jpg" width="200" height="200" />
 </div>
</div>

/*
 * 这个是改进版,结构更简单,图片超出外框能正确overflow.如果你发在FF上预览图片你可以找到这里相识的代码.
 */
<style type="text/css">
.main{width:500px;height:400px;position:relative;margin:100px auto 0 auto;background:#CCC;text-align:center;overflow:hidden;*font-size:350px;*font-family:Arial;}
.main img{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;*position:static;*vertical-align:middle;}
</style>
<div class="main">
 <img src="img/i01.jpg" width="200" height="150" />
</div>