西门的后花园

今天上午去面试一家大型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，但是不会影响后期的维护，直接去掉对应的样式表即可。

参考地址

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