图像在div 内垂直居中绝对ok 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

星期一, 2013-08-12 19:27 — shiping1

一个问题一直困扰着不少前端制作人员（也称前端开发工程师，o(∩_∩)o）。如题，如何实现一张未知宽高的图片在一个Div里面水平垂直居中呢？相信部分前端Sir首先想的是Table布局，是的，实现起来不是很麻烦，但肯定也有和浩子一样有代码洁癖的人。在这里，浩子忽略Table的实现方法，有兴趣的也可以去研究一下。下面介绍下用Html和CSS来实现如题效果。

先看看Demo效果：纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

PS：你可以用Firebug或者任意浏览器的开发人员工具修改图片尺寸，测试测试效果。（任何关于本文的问题请留言）

再看看代码，主要2部分：

HTML代码：

<div class=”demo”><a href=“#”><img src=“images/01.jpg” /></a></div>

CSS代码：

/*For Firefox Chrome*/
.demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
/*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
/*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);}

其中For IE6中的css有这么一段：

width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);

这是限制IE6下图片的最大宽和最大高，就像非IE6下的：

max-width:200px;max-height:140px;

是一个道理。

其他也没什么要过多解释的了，你懂的！如果你对部分CSS不太懂的话，请参考大前端的HTML+CSS一栏，或者前往w3school。

转载请注明：大前端 » 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

本文作者：浩子

大前端创始人，前端开发人员一枚，专注Web前端开发与可用性设计，关注腾讯微博关注新浪微博

与本文相关文章

网友评论17条

#13
width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);这个会大大影响页面的速度
guiguzi832012-12-25 15:43 回复
#12
Howdy, i read your blog from time to time and i own a similar one and i was just wondering if you get a lot of spam remarks? If so how do you prevent it, any plugin or anything you can suggest? I get so much lately it’s driving me insane so any assistance is very much appreciated.
pine wood coffee table2012-09-14 08:23 回复
#11
没什么了，兼容性不错！！
路人2012-03-09 14:20 回复
#10
还有博主请问这个评论插件的name是？
前端组2012-03-07 11:34 回复
#9
我就有点不明白了，为什么IE7是50%，而IE6是51%？
前端组2012-03-07 11:33 回复
#8
贴上我的代码
.pic { bottom:0; right:0; width:90px; height:90px; text-align:center;}
.pic a{ display:table-cell; width:90px; height:90px; outline:medium none; font-size:78px; line-height:78px; vertical-align:middle; text-align:center;}
.pic img { max-height:90px; _height:expression((documentElement.clientHeight >90) ? “90px” : “auto” ); margin:0 auto; vertical-align:middle;}
有问题发邮件哦
kavon2011-12-29 10:11 回复
#7
不错
顾小北2011-12-05 12:24 回复
#6
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 73px;/*这个值大概为最大高度的0.875*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:84px;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
/*非IE6下的等比缩放*/
max-height:84px;
max-width:200px;
/*IE6下的等比缩放，注意expression其实是运行了一个JS程序，所以如果图片很多的话会引起CPU占用率高*/
width:expression(this.width >200 && this.height 84 && this.width <= this.height ? 84 : true);
}
threeman2011-12-05 10:15 回复
#5
这篇太好啦，对我太有用啦，
jacky2011-05-05 13:29 回复
#4
居中，我个人习惯放作背景如：===========
php-小陳2011-01-17 10:48 回复
- 单个样式可以用作背景，批量的数据呢
  浩子2011-01-17 15:21 回复
#3
当relative作为postion时，那个top和left的百分比是以自身为基准吗？还是继续父容器？学习了。。以前没怎么注意。
菜心2011-01-05 11:54 回复
- postion主要是父与子的关系：
  父为relative时，子就继承了父
  浩子2011-01-05 12:42 回复
#2
我有个方法，拿出来大家讨论下，！~ 让图片的容容器{display:table;}图片{vertical-align:middle} 我现在一直在用，兼容性，也可以！~
水墨寒2011-01-04 10:06 回复
- 刚刚试过，这个方法好像不行
  浩子2011-01-04 10:10 回复
#1
不错不错，学习了。
树人2011-01-04 10:01 回复
- 新版出炉，提提建议哦
  浩子2011-01-04 10:06 回复
  
  来自 http://www.daqianduan.com/css-img/