图片垂直居中的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>

alimama_pid="mm_11951156_1494346_3839870";
alimama_titlecolor="0000FF";
alimama_descolor ="000000";
alimama_bgcolor="FFFFFF";
alimama_bordercolor="E6E6E6";
alimama_linkcolor="008000";
alimama_bottomcolor="FFFFFF";
alimama_anglesize="0";
alimama_bgpic="0";
alimama_icon="0";
alimama_sizecode="16";
alimama_width=658;
alimama_height=60;
alimama_type=2;