今天上午去面试一家大型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代码：
![]()
![]()
点评：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代码：
![]()
![]()
点评：因为有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代码：
![]()
![]()
点评：可以定位，float、margin都可以使用，更为方便。虽然多了一个无用的span，但是不会影响后期的维护，直接去掉对应的样式表即可。
以上三种方法，我会选择第三种。因为商城的图片横排居多，所以如果没有浮动，那是相当蛋疼的。希望自己花了的时间整理出来的代码会给大家提供帮助。
一直知道确定大小的怎么垂直居中- -..话说第一种方法很好理解.第三种用到的display:inline-block貌似IE7本身不支持. 但是border属性触发了IE7的haslayout?貌似是这样..~收藏收藏..说不定以后用得上~~
西门去瞅瞅这篇文章呗, 也许用得上～介绍inline-block的.(蓝色理想:http://www.blueidea.com/tech/web/2009/6497.asp)
说句实在话，我没有研究那么深入，只是需要的时候就用。关于haslayout看到很多，但是我也不知道这到底是什么。
那些面试的都是蛋疼的淫，很无聊的问题，其实就是看看你有没有遇到过
佩服博主的学习精神，支持一下。
面试时应该要提交相关的作品的吧，难道没有？而是用面试题考研前段设计的功底？
准确的说我应该是面试的重构，和设计没什么关系吧，又不是美工之类的工作。
😆 你又开始面试咯..
不工作，你养我？
一段时间没研究代码了，都看的不舒服了
😕 好想转载到我那儿啊，但是，不敢转了~
你又不搞代码，转载这干嘛
垂直我用 align="absmiddle" 。。水平的margin padding 什么的来解决。。
看来西门是个CSS大师啊，不知道你面试的是哪家。。
还不知道你是否在武汉读的书。
我22号到武汉。武昌。图书城。。
图书城？出版城吧？具体在哪里？我以前就在武昌省出版城附近工作。CSS菜鸟
图书城也叫，出版城也叫吧。脑子记不清了。那个鲁班奖建筑的前面也有一栋高高的建筑，有时候我就在那里。 -via phone post
如果方向错了，那么倒退就是前进。
好技术的文章，学习了！
代码的玩意儿，路过了，呵呵， 😮
看代码表示头晕，还是支持下
这挺折腾人的，题很刁钻的！
呵呵 还真是折腾人啊
来关注支持下！
收藏了···垂直居中很多时候会用到～～
好好研究吧，应聘成功了就是白领了。。。。 💡
挺有借鉴意义
font-size: 436px;这个用法太牛B了
学习了，谢谢博主，祝博主开心哈。。。
我一般会用第一种方法，在无视IE的情况下比较简单，适合我这种不会div+css的人 😈
西门兄，技术贴三连发呀 😮
➡ = =！
换个邮箱就能显示了吧。。
= =咋还是这个头像。。。 😕