html css 如何使图片居中且不变形

1、打开在线写前端代码的网站如jsrun或者jsfiddle

2、目标是做一个如图所示的效果，不同大小的图片

3、每个方框的html 如下，<div> <span> <img src='图片地址'> </img> </span></div>

4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。其中 颊俄岿髭display: table-cell; text-align: center; vertical-align: middle;这3行决定居中效果。其中img { max-width: 100%; max-height: 100%;}的目的是让图片可以缩放而比例不变。div { float:left; margin:5px; padding:5px; border:1px solid #000;}span { font-size: 0; width: 150px; height: 150px; display: table-cell; text-align: center; vertical-align: middle;}img { max-width: 100%; max-height: 100%;}

5、效果如下，很好的实现居中

6、上面是div为float的情况div如果是absolute或fixed也可以正常表现。只有一个div的情况下，代码如下<div>稆糨孝汶; <span> <img src='图片地址'> </img> </span></div>div { margin:5px; padding:5px; border:1px solid #000; position: absolute; left:100px; top:100px;}span { font-size: 0; width: 150px; height: 150px; display: table-cell; text-align: center; vertical-align: middle;}img { max-width: 100%; max-height: 100%;}

7、这张图片仍然是居中的，没有收到父容器的影响。