操作方法
打开在线写前端代码的网站如jsrun或者jsfiddle
目标是做一个如图所示的效果，不同大小的图片
每个方框的html 如下， <div> <span> <img src='图片地址'> </img> </span> </div>
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%; }
效果如下，很好的实现居中
上面是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%; }
这张图片仍然是居中的，没有收到父容器的影响。