假如現有一個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>