固定div盒子里的不同尺寸图片居中显示

假如现有一个div容器，宽高固定。有n张图片，尺寸均不相同(更大不会超过容器大小)，怎么让每一张图片在这个div容器里面居中显示而不变形？        

给div设定display: flex;justify-content: center;align-items: center; 可使图片水平居中，再给图片img设定max-width: 100%;max-height: 100%;display: block;margin:0 auto; 即可达到垂直居中（切记，是给图片加，不是div，很多人容易搞错）

代码如下：

<style>

*{

margin: 0;

padding: 0;

}

.fl {

float: left;

}

li, ol {

list-style: none;

}

.m4-prod-list-content-1-con li {

width: 48.56%;

margin-right: 5px;

}

.m4-prod-list-content-1-con li p{

width: 100%;

height: 171px;

border: solid 1px #d7d7d7;

display: flex;

justify-content: center;

align-items: center;

}

.m4-prod-list-content-1-con li img {

display: block;

max-width: 100%;

max-height: 100%;

box-sizing: border-box;

padding: 6px;

                        margin:0 auto;

}

.m4-prod-list-content-1-con span {

display: block;

color: #3b3e3d;

line-height: 2.4rem;

text-align: center;

padding: 0 0 1.5rem;

}

</style>

<div class="m4-prod-list-content-1-con">

<ul>

<a href="" title="">

<li class="fl">

<p><img alt="" src="20201225.jpg" title="" class="loaded"></p>

<span><a href="" title="不同尺寸图片">不同尺寸图片</a></span>

</li>

</a>

<a href="" title="">

<li class="fl">

<p><img alt="" src="20201225.jpg" title="" class="loaded"></p>

<span><a href="" title="不同尺寸图片">不同尺寸图片</a></span>

</li>

</a>  

</ul>

</div>