关注前端开发
关注用户体验

纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

一个问题一直困扰着不少前端制作人员(也称前端开发工程师,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(图片未知宽高)
分享到:更多 ()

评论 22

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #17

    这个在网站实际应用中用到的很多

    玻璃钢花盆1年前 (2015-07-29)回复
  2. #16

    ie8好像不行,宽度变大了,虽然居中

    lily2年前 (2015-04-02)回复
  3. #15

    在IE8里面看到demo有问题,图片左右莫名加了间距,不知道为什么。环境:64位WIN7+IE8

    bunorte3年前 (2014-01-27)回复
    • 我的也是这样

      lily2年前 (2015-04-02)回复
  4. #14

    img是inline元素吧,如果不指定”display:block;”的话,”margin:0 auto”并不会起作用哦.

    darkhorse3年前 (2013-11-20)回复
  5. #13

    width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);这个会大大影响页面的速度

    guiguzi834年前 (2012-12-25)回复
  6. #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 table4年前 (2012-09-14)回复
  7. #11

    没什么了,兼容性不错!!

    路人5年前 (2012-03-09)回复
  8. #10

    还有博主请问这个评论插件的name是?

    前端组5年前 (2012-03-07)回复
  9. #9

    我就有点不明白了,为什么IE7是50%,而IE6是51%?

    前端组5年前 (2012-03-07)回复
  10. #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;}

    有问题发邮件哦

    kavon5年前 (2011-12-29)回复
  11. #7

    😆 不错

    顾小北5年前 (2011-12-05)回复
  12. #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);
    }

    threeman5年前 (2011-12-05)回复
  13. #5

    这篇太好啦,对我太有用啦, :mrgreen:

    jacky6年前 (2011-05-05)回复
  14. #4

    居中,我个人习惯放作背景 如:=========== 

    php-小陳6年前 (2011-01-17)回复
    • 单个样式可以用作背景,批量的数据呢

      浩子6年前 (2011-01-17)回复
  15. #3

    当relative作为postion时,那个top和left的百分比是以自身为基准吗?还是继续父容器?学习了。。以前没怎么注意。

    菜心6年前 (2011-01-05)回复
    • postion主要是父与子的关系:
      父为relative时,子就继承了父

      浩子6年前 (2011-01-05)回复
  16. #2

    😳 我有个方法,拿出来大家讨论下,!~ 让图片的容容器{display:table;}图片{vertical-align:middle} 我现在一直在用,兼容性,也可以!~

    水墨寒6年前 (2011-01-04)回复
    • 刚刚试过,这个方法好像不行

      浩子6年前 (2011-01-04)回复
  17. #1

    不错不错,学习了。

    树人6年前 (2011-01-04)回复
    • 新版出炉,提提建议哦

      浩子6年前 (2011-01-04)回复

themebetter 国内更好的WordPress主题服务商

立即前往