西门的后花园

一个热爱网络的年轻人的博客

三种CSS方法实现不确定大小图片水平垂直居中

今天上午去面试一家大型B2C网上商城的前端开发,结果被一道要求不确定大小的图片,在固定DIV里横竖都居中的题目难到了。只记得以前看见万戈写过相关文章,但当时只是觉得自己用不到,所以没去仔细看。结果到用的时候,后悔莫及啊!我就知道水平居中的两种方法,一种是text-align:center;,另外一种是WordPress里面插入图片时用到的.aligncenter{display:block;margin-left:auto;margin-right:auto;}。可是不知道怎么垂直居中啊!

晚上搜索了好久,感觉下面三种方法可圈可点,比较适合平常的运用,所以就记录下来,下次遇见这种问题直接copy。以下代码测试IE6、7、8、chrome、FF。

方法一:

由于非IE浏览器下,display:table-cell;vertical-align:middle;就可以搞定上下居中。所以对于hack定位,是写给IE的。

CSS代码:

.box{width:500px;height:500px;background-color:#f0f0f0;margin:10px;border:1px solid #000;text-align:center;position:relative;display:table-cell;vertical-align:middle;}
.box p{*position:absolute;top:50%;left:50%;}
.box p img{*position:relative;top:-50%;left:-50%;}

HTML代码:

DEMO

点评:IE8下无border;因为有display:table-cell,所以不能定位,比如margin。

参考地址

方法二:

和方法一类似,只是处理IE时,不是用的定位,这种方法看不懂,可以去问问原作者吧,是淘宝的。

CSS代码

.box {width:500px;height:500px;background-color:#f0f0f0;margin:10px;border:1px solid #000;display:table-cell;vertical-align:middle;text-align:center;*display: block;
*font-size: 436px;/*约为高度的0.873,500*0.873 约为436*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
}
.box img{vertical-align:middle;}

HTML代码:

DEMO

点评:因为有display:table-cell,所以不能定位,比如margin。

参考地址

方法三:

和方法一、二完全不同,是利用空标签span高度100%,然后让图片和span一起垂直居中。

CSS代码

.box{float:left;width:500px;height:500px;background-color:#f0f0f0;margin:10px;border:1px solid #000;text-align:center;font-size:0;}
.box *{ vertical-align:middle;}
.box span{display:inline-block; height:100%;}

HTML代码:

DEMO

点评:可以定位,float、margin都可以使用,更为方便。虽然多了一个无用的span,但是不会影响后期的维护,直接去掉对应的样式表即可。

参考地址

以上三种方法,我会选择第三种。因为商城的图片横排居多,所以如果没有浮动,那是相当蛋疼的。希望自己花了的时间整理出来的代码会给大家提供帮助。

评论列表

  1. 一直知道确定大小的怎么垂直居中- -..话说第一种方法很好理解.第三种用到的display:inline-block貌似IE7本身不支持. 但是border属性触发了IE7的haslayout?貌似是这样..~收藏收藏..说不定以后用得上~~ :mrgreen: 西门去瞅瞅这篇文章呗, 也许用得上~介绍inline-block的.(蓝色理想:http://www.blueidea.com/tech/web/2009/6497.asp)

    • 说句实在话,我没有研究那么深入,只是需要的时候就用。关于haslayout看到很多,但是我也不知道这到底是什么。

  2. 那些面试的都是蛋疼的淫,很无聊的问题,其实就是看看你有没有遇到过

  3. 佩服博主的学习精神,支持一下。

  4. 面试时应该要提交相关的作品的吧,难道没有?而是用面试题考研前段设计的功底?

  5. 😆 你又开始面试咯..

  6. 一段时间没研究代码了,都看的不舒服了

  7. 😕 好想转载到我那儿啊,但是,不敢转了~

  8. 垂直我用 align="absmiddle" 。。水平的margin padding 什么的来解决。。

    看来西门是个CSS大师啊,不知道你面试的是哪家。。

    还不知道你是否在武汉读的书。 :mrgreen:

    我22号到武汉。武昌。图书城。。

    • 图书城?出版城吧?具体在哪里?我以前就在武昌省出版城附近工作。CSS菜鸟

      • 图书城也叫,出版城也叫吧。脑子记不清了。那个鲁班奖建筑的前面也有一栋高高的建筑,有时候我就在那里。 -via phone post

  9. 如果方向错了,那么倒退就是前进。

  10. 好技术的文章,学习了!

  11. 代码的玩意儿,路过了,呵呵, 😮

  12. 看代码表示头晕,还是支持下

  13. 这挺折腾人的,题很刁钻的!

  14. 呵呵 还真是折腾人啊

  15. 来关注支持下!

  16. 收藏了···垂直居中很多时候会用到~~

  17. 好好研究吧,应聘成功了就是白领了。。。。 💡

  18. 挺有借鉴意义

  19. font-size: 436px;这个用法太牛B了

  20. baby walker

    学习了,谢谢博主,祝博主开心哈。。。

  21. 我一般会用第一种方法,在无视IE的情况下比较简单,适合我这种不会div+css的人 😈

  22. 西门兄,技术贴三连发呀 😮

  23. 换个邮箱就能显示了吧。。

  24. = =咋还是这个头像。。。 😕

发表评论

分类目录