An image of unknown size (but its height and width are smaller than px) is centered horizontally and vertically in a PX square container using pure CSS.

Div {width: 200px; Height: 200px; Border: 1px solid #666; display: Table-cell; Vertical-align: middle; text-align: center; * float: left; // here float: Left is used to be compatible with IE Supporting Left and Right Arrangement} Div IMG {margin-top: expression (100-this.height/2 ); // use vertical-align: middle; instead if you do not want to arrange the left and right sides. We recommend that you use expressions here. Although the performance is poor, IE6 is just like this. No way}

Of course, there may be other good methods. I hope the masses of money can attack the city to give you good dishes.