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

纯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。

赞(1)
未经允许不得转载:大前端 » 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
分享到: 更多 (0)

评论 55

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

    Link exchange is nothing else except it is just placing the other person’s website link on your page at suitable place and other person will also do similar for you.

  2. #49

    gold jewelry bracelets are a bit pricey but they last longer and are very durable too.

    Earle Starratt2周前 (05-14)回复
  3. #48

    I have been examinating out many of your stories and i must say pretty good stuff. I will make sure to bookmark your blog.

    Nonton Anime2周前 (05-11)回复
  4. #47

    It looks like which i are concerned about my own personal information, not necessarily a different inividual in my small analysis.

    cat2周前 (05-08)回复
  5. #46

    Howdy, I do think your web site may be having browser compatibility issues. Whenever I look at your web site in Safari, it looks fine however when opening in Internet Explorer, it has some overlapping issues. I merely wanted to provide you with a quick heads up! Other than that, fantastic blog!

  6. #45

    Keep up the good work! Thanks.

    Gevoelige huid1个月前 (04-21)回复
  7. #44

    bookmarked!!, I like your web site!

    DMC51个月前 (04-20)回复
  8. #43

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Puistjes1个月前 (04-20)回复
  9. #42

    Looks realy great! Thanks for the post.

    schoonheidssalon1个月前 (04-19)回复
  10. #41

    Keep up the good work! Thanks.

  11. #40

    Keep up the good work! Thanks.

    huidverzorging1个月前 (04-18)回复
  12. #39

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Couperose1个月前 (04-17)回复
  13. #38

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Droge huid1个月前 (04-17)回复
  14. #37

    Looks realy great! Thanks for the post.

    Rocasea1个月前 (04-16)回复
  15. #36

    Looks realy great! Thanks for the post.

    Puistjes1个月前 (04-16)回复
  16. #35

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Gevoelige huid1个月前 (04-16)回复
  17. #34

    Looks realy great! Thanks for the post.

    Ontstekingen1个月前 (04-16)回复
  18. #33

    Nice post! Thank you.

    Jeugdpuistjes1个月前 (04-16)回复
  19. #32

    Enjoyed the post.

    schoonheidssalon1个月前 (04-16)回复
  20. #31

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  21. #30

    Nice post! Thank you.

    Huid verbetering1个月前 (04-15)回复
  22. #29

    Looks realy great! Thanks for the post.

    gezichtsbehandeling1个月前 (04-15)回复
  23. #28

    Looks realy great! Thanks for the post.

    Anti aging1个月前 (04-15)回复
  24. #27

    I was able to find good advice from your blog articles.

    DMC51个月前 (04-14)回复
  25. #26

    I like reading an article that can make people think. Also, thanks for allowing for me to comment!

    DMC51个月前 (04-12)回复
  26. #25

    Nice post! Thank you.

    administratie breda1个月前 (04-11)回复
  27. #24

    Enjoyed the post.

    boekhoudkantoor breda1个月前 (04-11)回复
  28. #23

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    accountant breda2个月前 (04-08)回复
  29. #22

    Howdy! This blog post couldn’t be written any better! Looking through this post reminds me of my previous roommate! He always kept preaching about this. I most certainly will forward this article to him. Fairly certain he’ll have a very good read. I appreciate you for sharing!

    DMC52个月前 (04-02)回复
  30. #21

    Hello there! This post couldn’t be written any better! Looking at this post reminds me of my previous roommate! He always kept talking about this. I am going to forward this article to him. Pretty sure he’s going to have a great read. Thanks for sharing!

    Apex Legends Season 12个月前 (03-31)回复
  31. #20

    wireless headphones are the best because they do not have those bulky wires`

    my singing monsters2个月前 (03-28)回复
  32. #19

    Thanks for the sensible critique. Me and my neighbor were just preparing to do some research on this. We got a grab a book from our area library but I think I learned more clear from this post. I’m very glad to see such great information being shared freely out there.

    Hubert Bloomingdale3个月前 (03-11)回复
  33. #18

    我就说这方法不好 一看是6年前的…………
    现在还是用flex吧

    ssd2年前 (2017-01-29)回复
  34. #17

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

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

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

    lily4年前 (2015-04-02)回复
  36. #15

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

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

      lily4年前 (2015-04-02)回复
  37. #14

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

    darkhorse6年前 (2013-11-20)回复
  38. #13

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

    guiguzi837年前 (2012-12-25)回复
  39. #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 table7年前 (2012-09-14)回复
  40. #11

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

    路人7年前 (2012-03-09)回复
  41. #10

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

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

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

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

    有问题发邮件哦

    kavon8年前 (2011-12-29)回复
  44. #7

    😆 不错

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

    threeman8年前 (2011-12-05)回复
  46. #5

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

    jacky8年前 (2011-05-05)回复
  47. #4

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

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

      浩子8年前 (2011-01-17)回复
  48. #3

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

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

      浩子9年前 (2011-01-05)回复
  49. #2

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

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

      浩子9年前 (2011-01-04)回复
  50. #1

    不错不错,学习了。

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

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

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

立即前往