css图片居中对齐（css图片垂直居中对齐怎么设置）

无论是做web前端还是手机端的前端页面，我们经常会用到的就是图片不规则，而我们又需要这个图片在容器上以水平垂直居中显示，如上图。

其实这个也很简单，直接上我写的样式：

CSS：

<style type="text/css">

.img-container{width: 100%; float: left}

.img-container span{width:120px;height:120px;overflow:hidden;position:relative;text-align:center;vertical-align:middle; border:#ccc 1px solid; float: left; margin-left: 20px; padding:7px; display: block;}

.img-container span a{position:absolute;top:50%; left: 50%; transform: translate(-50%, -50%);}

.img-container span a img{max-width:120px;max-height:120px; }

</style>

代码：

<div class="img-container">

<span>

<a href=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254J1M-1.jpg" alt=""></a>

</span>

<span>

<a href=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254H194-2.jpg" alt=""></a>

</span>

<span>

<a href=""><img src="https://img.pc-daily.com/uploads/allimg/220107/16254G112-3.jpg" alt=""></a>

</span>

</div>