今天遇到的问题：使用纯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 ; /* 设置图片垂直居中 */
}
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 >
< img src ="http://www.homeun.com/UserDocument/YOYO/Picture/2008061920024038399.bmp" />
</ div >
