无论是做web前端还是手机端的前端页面，我们经常会用到的就是图片不规则，而我们又需要这个图片在容器上以水平垂直居中显示，如上图。
其实这个也很简单，直接上我写的样式：
CSS：
<styletype="text/css">
.img-container{ width:100%;float:left}
.img-containerspan{ width:120px;height:120px;overflow:hidden;position:relative;text-align:center;vertical-align:middle;border:#ccc1pxsolid;float:left;margin-left:20px;padding:7px;display:block;}
.img-containerspana{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.img-containerspanaimg{max- width:120px;max-height:120px;}
</style>
代码：
<divclass="img-container">
<span>
<ahref=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254J1M-1.jpg" alt=""></a>
</span>
<span>
<ahref=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254H194-2.jpg" alt=""></a>
</span>
<span>
<ahref=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254G112-3.jpg" alt=""></a>
</span>
</div>