在曾经的 淘宝UED 招聘 中有这样一道题目:

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

题目的难点在于两点:

  1. 垂直居中;
  2. 图片是个置换元素,有些特殊的特性。

至于如何解决,下面是一个权衡的相对结构干净,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;
}

<div class="box">
	<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:



共有77 条评论

  1. 1. 头像 ytzong

    win7/vista和xp字体高度不同,对font-size也有影响,也就是说在xp居正中的font-size值同样用在win7/vista中不会在正中。鉴于此我倾向于用评论1的做法,不过可以用空的inline-block元素来代替空白图片

  2. 2. Devivan » 标准浏览器实现图片垂直居中的另一方法

    […] 后,在主流浏览器上都可以实现居中。 再加上对IE 6 hack之后就可以实现兼容主流浏览器了。 […]

  3. 3. 头像 米田

    这种还是无法解决图片长宽大于父级元素的情况。

  4. 4. 头像 加气混凝土设备

    很不错的,文章,不过遇到这种情况,我一般都是把图片处理的差不多之后,直接统一大小。我觉得这样会美观一些。学习了。

  5. 5. 头像 牛图库

    多图;.box{float:left;}

    图片垂直居中无效。

  6. 6. 图片垂直居中 | 看日出

    […] 参考链接http://www.planabc.net/2008/05/26/img_vertical_center_solution/ css/javascript ← 关于overflow:hidden属性 20101115上海高楼大火 → /* */ […]

  7. 7. 头像 苏昊

    .box{width:300px; height:300px;float:left;text-align:center;background-color:#ddd;font-size:0;*font:300px/1 “宋体”;}/*chrome浏览器不支持font-size:0;这里有改进办法,需要多加一些代码*/
    .box img{vertical-align:middle;width:200px;height:200px;}
    .box:after{display:inline-block;width:0;height:100%;content:””;vertical-align:middle;}利用伪类不用添加任何多余标签

  8. 8. css垂直水平居中的整理 | 前端开发-武方博

    […] PS:利用行高等于盒子高度实现高级浏览器,IE6/7的hack font-size等于盒子height乘以差不多0.873的数值,参看:怿飞:图片垂直居中的使用技巧。 […]

  9. 9. 头像 zdongh2010

    为什么把容器的标签换为a标签之后就没办法实现主流浏览器垂直居中呢?

  10. 10. 图片垂直居中的使用技巧 | 蜂蜜小熊的家

    […] 原文链接 作者:怿飞 […]

  11. 11. 头像 CHUANG

    /* 针对IE的Hack */
    *display: block;
    *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
    *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
    表述不对,是针对ie7及以下版本浏览器,*是IE7及以下浏览器能识别,
    /*非IE的主流浏览器识别的垂直居中的方法,IE8是识别的*/
    display: table-cell;
    vertical-align:middle;
    楼主写这篇文章的时候IE8还没有发布,现在IE10预览版都有了哈~~

  12. 12. Vertical centring use skill pictures (turn)

    […] original address:http://www.planabc.net/2008/05/26/img_vertical_center_solution/ var infolink_pid = 138755; var infolink_wsid = […]

  13. 13. designIdea » 图片垂直居中的使用技巧

    […] 来源:怿飞:图片垂直居中的使用技巧 分享到: 新浪微博 网易微博 腾讯微博 豆瓣网 鲜果 GoogleReader Delicious Digg […]

  14. 14. 头像 tamen365

    […] 来源:怿飞:图片垂直居中的使用技巧 分享到: 新浪微博 网易微博 腾讯微博 豆瓣网 鲜果 GoogleReader Delicious Digg […]

  15. 15. 未知大小图片垂直居中 | Designer & Developer

    […] http://www.planabc.net/2008/05/26/img_vertical_center_solution/ […]

  16. 16. IE底下,垂直對齊 vertical-align 的 CSS 解決方法 | 睿客設計技術筆記

    […] 另外一篇也是在講這個,方法不太一樣:图片垂直居中的使用技巧 本篇發表於 css 與標籤於 css、ie6 由 joyhsu。固定網址書籤。 […]

  17. 17. 图片垂直居中 | web前端记事本

    […] 这是圆心的文章,也可以去看看! 《图片垂直居中的使用技巧 》 […]

  18. 18. 头像 zoowar

    刚来公司不久,同事丢一个bug给我,其中span是浮动的,h4也是浮动,被他设置成了display:inline-block;情况不是很严重就是那个图片不能够垂直居中,这个问题比较棘手。

  19. 19. 头像 zoowar

    不过我还是这样解决了。把img设置成相对位置。然后top:2px;看了下IE6也没问题。

  20. 20. 图片垂直居中 | Jason's Blog

    […] 感谢怿飞提供的图片垂直居中的使用技巧 本条目发布于 10/23/2009。属于 Develop 分类。作者是 jason。 […]

  21. 21. 未知高度图片垂直居中 | HeadFirst

    […] http://www.planabc.net/2008/05/26/img_vertical_center_solution/ 此条目是由 funfungo 发表在 未分类 分类目录的。将固定链接加入收藏夹。 […]

  22. 22. [CSS]图片水平垂直居中 - 听海阁

    […] http://www.planabc.net/2008/05/26/img_vertical_center_solution/ […]

  23. 23. img垂直居中 | otarim

    […] 原文:http://www.planabc.net/2008/05/26/img_vertical_center_solution/ […]

  24. 24. 如何实现 图片居中对齐?? - 开发者问答

    […] 回复: http://www.planabc.net/2008/05/26/img_vertical_center_solution/ […]

  25. 25. 图片垂直居中的使用技巧 - web标准 - 开发者问答

    […] •《Vertical centering using CSS》 •《Vertical centering using CSS》(标题和上同,内容不同) •《CSS List Grid Layout》 原文转自怿飞’blog:http://www.planabc.net/2008/05/26/img_vertical_center_solution/ […]

  26. 26. 头像 ginowang42

    那个font-size的问题我试验了下,这个我感觉好像是于字体的渲染有关,我试验了个数据,和你的这个很接近:0.83。
    这个0.83正好是arial字体从字体顶部到字体基线的比例:5/6=0.83。
    具体的关联我也没想明白。

  27. 27. 图片垂直居中的使用技巧 | HTML5 CSS3 JavaScript

    […] 文章转自:http://www.planabc.net/2008/05/26/img_vertical_center_solution/ Posted in: CSS(3) […]

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签