这里先介绍一下淘宝网是如何处理这个问题的，刚在网上查找解决方法时，发现淘宝网现前端工程师”怿飞”的博客中有提到，先看看他提示的方法，

效果演示：

源代码：

.box {
	/*非IE的主流浏览器识别的垂直居中的方法*/
	display: table-cell;
	vertical-align:middle;
	/*设置水平居中*/
	text-align:center;
	/* 针对IE的Hack */
	*display: block;
	*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
	*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
	200px;
	height:200px;
	border: 1px solid #eee;
}
.box img {
	/*设置图片垂直居中*/
	vertical-align:middle;
	/*非IE6下的等比缩放*/
	max-height:150px;
	max-150px;
	/*IE6下的等比缩放，注意expression其实是运行了一个JS程序，所以如果图片很多的话会引起CPU占用率高*/
	expression(this.width >150 && this.height < = this.width ? 150: true);    	height:expression(this.height > 150 && this.width < = this.height ? 150 : true);
}

注：以上方法在IE8下不推荐。可以使用在IE6，IE7，FF等。

接下来让我们看看其它解决IE6，IE7，IE8，FF等浏览器居中问题的办法。

图片要垂直水平居中
第一种
css里面



body里面




第二种
css里面




body里面




第三种
css里面




body里面


< ![endif]-->


  


第四种
css里面




body里面




有兴趣的可以阅读以下方法：
•《Vertical centering using CSS》
•《Vertical centering using CSS》（标题和上同，内容不同）
•《CSS List Grid Layout》


如有其它好方法请留言。




相关文章：


1、经典DIV + CSS Layout
http://www.onexin.net/classic-div-css-layout/


2、纯CSS制作随着鼠标跑动的裸男
http://www.onexin.net/naked-man-running-the-pure-css-production-with-the-mouse/


3、CSS+DIV基础知识大观
http://www.onexin.net/css-div-basics-of-grand/


4、网站重构：利用CSS改善网站可访问性
http://www.onexin.net/site-reconstruction-using-css-to-improve-website-accessibility/


5、DIVC+SS网页特效欣赏：非常酷的角BANNER
http://www.onexin.net/divc-ss-web-effects-appreciate-very-cool-angle-banner/