CSS如何让图片垂直并水平居中等比缩放?

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

效果演示：

源代码：

.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编码*/
	width:200px;
	height:200px;
	border: 1px solid #eee;
}
.box img {
	/*设置图片垂直居中*/
	vertical-align:middle;
	/*非IE6下的等比缩放*/
	max-height:150px;
	max-width:150px;
	/*IE6下的等比缩放，注意expression其实是运行了一个JS程序，所以如果图片很多的话会引起CPU占用率高*/
	width: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》

如有其它好方法请留言。

转载请注明出处：https://www.onexin.net/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

相关文章：