2008-5-26 下午 - HTML/CSS/XML/XSL - -   

在曾经的 淘宝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>

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

这篇文章发表2008年5月26日 下午 21:03，并被分类于HTML/CSS/XML/XSL，已被 13963 人阅读。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表您的评论，或者在您自己的网站中 引用（trackback） 该篇日志。



共有43 条评论

  1. 1. 头像 怿飞 2008年5月26日 下午 9:29 ₪

    《Vertical Middle》：通过添加一无语义图片来解决图片居中问题，源自韩国Yahoo

  2. 2. 头像 西风坊 2008年5月26日 下午 9:54 ₪

    font-size: 175px;/*约为高度的0.873，200*0.873 约为175*

    请教为什么是0.873啊？

  3. 3. 头像 arthuridea 2008年5月26日 下午 11:16 ₪

    学习了。。。-v-.

  4. 4. 头像 手气不错 2008年5月26日 下午 11:28 ₪

    圆心用的似乎是将其 display 为表格元素（这样做其实和表格无异），不过从“教科书”（语义）商说，

    display: table-cell;

    最好被

    display: table

    包围。

    这里还有篇文章，也值得参考：

    http://www.blueidea.com/tech/web/2006/3231.asp

  5. 5. 逍遥老鬼继续扯淡 2008年5月27日 上午 8:30 ₪

    【转】图片垂直居中的使用技巧…

    　　以前也经常遇到未知高度的图片或者文字垂直居中的问题，搞一堆代码，最后才使的图片垂直居中了，太麻烦，甚至现在我的博客上面的rss的图标，还没有垂直居中。
    　　今天怿飞的博…

  6. 6. 头像 云谦 2008年5月27日 上午 8:54 ₪

    解决方案没有问题，但是我的理解有些不同：
    1. font-size和高度的比和字体有关，不同的字体有不同的比率；
    2. 另外我觉得hack失效不是编码的问题。

  7. 7. 头像 小宁 2008年5月27日 上午 9:02 ₪

    当时在淘宝UED就已看过此解，对使用这个*font-size: 175px;还是觉得不很明智

  8. 8. 头像 怿飞 2008年5月27日 上午 9:17 ₪

    @云谦 font-size和高度是否和字体有关，自己没有去深究（毕竟仅是一个Hack），但我们简单测试了设置了几个常用字体和未设置字体的情况下基本表现是一致的，这个hedger也曾提出过疑问。失效的环境是我在B2C开发的时候碰到的，而我给出的font-family仅是一个解决方案而已，同样对于此也没有去深究。

  9. 9. 头像 怿飞 2008年5月27日 上午 9:21 ₪

    @小宁 更希望看到你明智的做法。无谓的增加结构是我一直不提倡的做法。但至少提供的解法，没有给结构添加多余的标签，样式代码也很简洁，而且在跨浏览器上表现也大体一致，当然也有他本身不少的缺点。有缺点有好处在才会有权衡。

  10. 10. 头像 怿飞 2008年5月27日 上午 9:35 ₪

    @西风坊 0.873这个数据是试验算出来的比例，呵呵……

  11. 11. 头像 MarVell 2008年5月28日 上午 12:45 ₪

    感觉还是1/8好算些…不过效果会偏移几像素……韩国的那个链接貌似失效了..另外:把这个淘宝的广告放右边吧..留言框档了半截…

  12. 12. 头像 怿飞 2008年5月28日 上午 9:03 ₪

    @MarVell 恩，广告放右边，自己的显示器分辨率大点，没注意，谢谢提醒！

  13. 13. 头像 sunny 2008年5月28日 下午 2:32 ₪

    在BOX里加了下这个
    margin-top: 26px;

    margin-left: 7px;
    margin-right: 14px;
    在火狐里就不居中了，为什么啊

  14. 14. 头像 大猫 2008年5月29日 下午 12:58 ₪

    google pages撞墙了。。。不过韩国那孩子想法真不错，也不用hack了，我恨hack我恨IE6我恨垃圾代码

  15. 15. 头像 加减乘除888 2008年5月30日 下午 4:25 ₪

    我试了下，确实不错，只是还有个疑问要向怿飞请教，那个font-size的值为什么一定要是高度的0.873，我也试了下将高度设为更大，但这会撑大父元素的高度，不知是什么原因？

  16. 16. 头像 Lin.X 2008年6月1日 下午 3:42 ₪

    我自己常用的解决方案:CSS把图像做背景,水平垂直都居中

  17. 17. 头像 怿飞 2008年6月1日 下午 5:23 ₪

    @Lin.X 你说的方式的确很方便，但如果图片都是读取数据的话，你这个方式就比较麻烦，开发人员不可能去接触你的CSS文件，另如果用内联的style，会影响HTML的干净。

  18. 18. 头像 Lin.X 2008年6月1日 下午 6:21 ₪

    如果图片都是读取数据的话,Ajax去控制可以符合你的要求吧,呵呵

  19. 19. 头像 Lin.X 2008年6月1日 下午 6:22 ₪

    哦,怎么才能有头像啊,我没用过WP
    貌似也没哪能注册呢

  20. 20. 头像 kaochina 2008年6月24日 下午 4:20 ₪

    先看 在研究

  21. 21. 头像 菠菜 2008年6月24日 下午 4:25 ₪

    在设置多个图片水平放置时，加了float:left;后在firefox里就不在垂直居中了。

  22. 22. 头像 Juven 2008年7月3日 上午 10:29 ₪

    因为有了display: table-cell后，所以float:left就无法居中排列显示了。
    同时将div放在li中，如果BOX中使用padding的，在FF与Opera中也会出现高度不一。

  23. 23. 头像 Juven 2008年7月3日 下午 1:45 ₪

    补充一点，如果高度设置低于107PX，在FF与Opera中也会出现高度不一的情况。大家不仿可以试一下。

  24. 24. 头像 怿飞 2008年7月3日 下午 2:03 ₪

    @菠菜 @Juven 谢谢大家的意见，你们提到的有些问题在实践的过程自己也碰到，但其实任何方法都有其某些缺陷，我们需要做的是在合理的位置使用合理的方法。

  25. 25. 头像 怿飞 2008年7月3日 下午 2:07 ₪

    @Juven 对于你的第二个问题，看看你的例子是否是满足本例的基本条件的。

  26. 26. 头像 zenkin 2008年7月8日 上午 11:17 ₪

    膜拜这方法~

    用2个div模拟出的垂直居中不及这个fong-size方法好~~

  27. 27. 头像 STONG 2008年7月29日 下午 1:16 ₪

    非常好的方法，谢谢！！！！

  28. 28. 头像 加减乘除888 2008年7月30日 上午 10:38 ₪

    我在几个浏览器里测试后算了下，用Arial字体那个比例应该是0.89……，还有在IE里如果用宋体的话那个比例就是1，也就是可以将font-size设置成需要的值200px。

  29. 29. 头像 asgardoo 2008年7月31日 下午 5:32 ₪

    能转不？

  30. 30. 头像 东捣 2008年8月11日 下午 8:09 ₪

    学习～

  31. 31. 头像 lhnlj2 2008年8月25日 下午 3:21 ₪

    不错的教程，以前还天天在找这些东西。。今天更加理解了。

  32. 32. CSS图片垂直居中 — 企鹅 2008年10月28日 上午 9:25 ₪

    [...] 该文转自http://www.planabc.net/2008/05/26/img_vertical_center_solution/          在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” [...]

  33. 33. 头像 Lyuba 2008年11月6日 上午 11:54 ₪

    Blin … really beautifully written! All this is so familiar … and truthfully!

  34. 34. 标准浏览器实现图片垂直居中的另一方法 | <Design/> 2008年11月7日 下午 2:26 ₪

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

  35. 35. 头像 Srandy 2008年12月30日 下午 5:30 ₪

    爬出来说，今天发现IE7下可以用外容器等高的line-height实现居中～

  36. 36. 头像 longbill 2009年2月11日 下午 4:25 ₪

    哈哈，收藏了。我以前用的方法是把图片做成div的background-image，来实现居中的。

  37. 37. 头像 yoyo 2009年3月18日 下午 3:02 ₪

    学习了啊，呵呵呵~希望有机会可以多交流。

  38. 38. CSS置中問題的解決 « 網路人‧觀察與學習 2009年4月2日 下午 1:54 ₪

    [...] 因此衍生下列解決方案,根據google的爬文,關於圖片的垂直居中方式,在中國大陸有個不錯的思路可以藉鑑. [...]

  39. 39. 头像 股吧 2009年4月20日 上午 12:40 ₪

    再次学习了！收藏

  40. 40. PerfectWorks 2009年5月2日 下午 2:19 ₪

    用background属性实现任意图片垂直居中显示…

    本文方法使用了W3C不推荐的style属性，标准狂人请绕道。
    为什么要垂直居中
    这两天在帮同学做一个在线相册程序，类似于Picasaweb，做到图片居中显示这里做不下去了，example 1.html。不能垂直居…

  41. 41. 头像 Mask 2009年5月6日 下午 5:41 ₪

    这个做法确实在结构上很简洁！！ 不过麻烦的就是高度变了css就得变，不过也不错了~

  42. 42. 头像 colinivy 2009年5月11日 上午 10:40 ₪

    用不同字体测试了下，真的与字体有关系

    Verdana字体，字体大小/高度 约为82.4%
    Times New Roman 字体，字体大小/高度约为90%

  43. 43. Marshane's blog » 图片垂直居中的使用技巧 2009年7月1日 下午 12:45 ₪

    [...] 本文来自怿飞 分类: html/css 标签: html/css 评论 (0) Trackbacks (0) 发表评论 Trackback [...]

发表评论

(必填)

(必填，会为您保密)

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