1.淘宝的方法
在曾经的"淘宝UED招聘"中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：
垂直居中； 图片是个置换元素，有些特殊的特性。 至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：
.box { display: table-cell; vertical-align:middle;
text-align:center;
*display: block; *font-size: 175px; *font-family:Arial;
width:200px; height:200px; border: 1px solid #eee; } .box img { vertical-align:middle; }
<div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/ taoscars_180x95_071112_sr.jpg" /> </div>
2.背景法 <style type="text/css"> * {margin:0;padding:0;} div { width:500px;border:1px solid #f00; height:500px; background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat } </style> <div> </div>
背景法简单但不利于动态导入的图片
3.背景法
div{
height: 400px; line-height: 400px; overflow: hidden; }
div{
height: 400px; line-height: 400px; overflow: hidden; }
.qq { width:500px; display:table-cell; height:400px; text-align:center; vertical-align:middle; border: 1px solid #000 } i { display:inline-block; height:100%; vertical-align:middle } .qq img { vertical-align:middle; } </style> <div class="qq"><i></i><img src="http://www.baidu.com/img/baidu_logo.gif" /></div>
这种方法也很简单，但需要加一个<i>的额外标签
如果页面需要一两个居中的图片，那此方法是可推荐，但如果很多个产品的图，那加的标签数量就比较多
其他解决方法，有兴趣的朋友可以戳：http://bbs.blueidea.com/thread-2666987-1-9.html
此方法也只适用于单行的文字或者图片+文字，通常用于前面带有小图标的链接或标题等。
div{
height: 400px; line-height: 400px; overflow: hidden; }
