图片垂直居中的CSS技巧

今天遇到的问题：使用纯CSS实现未知尺寸的图片在275px的正方形容器中(高宽都小于275px)水平和垂直居中。

主要在于：图片未知大小，而且要求垂直居中。

下面是找的一个权衡的相对结构干净，CSS简单的解决方法：

.box {
    width:275px;
    height:275px;
    border:1px solid #ccc;
    /*非IE的主流浏览器识别的垂直居中的方法*/
    display: table-cell;
    vertical-align:middle;

    /*设置水平居中*/
    text-align:center;

    /* 针对IE的Hack */
    *display: block;
    *font-size: 240px;/*约为高度的0.873，275*0.873 约为240*/
    *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
}
.box img {
    vertical-align:middle;/*设置图片垂直居中*/
}

HTML:

<div class="box">
  <img src="http://www.homeun.com/UserDocument/YOYO/Picture/2008061920024038399.bmp" />
</div>