CSS樣式設計中，常常會用到li列表和圖片的結合，而如何使得圖片在li中居中顯示呢？下面介紹一種解決方案：

li{
width: 200px;
height: 200px;
text-align: center;
background-color: #ccc;
margin: 10px;
}
img{
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}

以上代碼中，li的寬高設置為200px，text-align設置為center，是為了使得圖片在li中水平居中。同時，設置了一個灰色背景方便觀察效果。img標簽的max-width和max-height均設置為100%，是為了保證圖片不失真。而vertical-align設置為middle，是為了使圖片在垂直方向上居中。

當然，如果圖片本身大小已經小于li的寬高時，直接將img設置為display:block，加上margin:auto即可：

li{
width: 200px;
height: 200px;
text-align: center;
background-color: #ccc;
margin: 10px;
}
img{
display: block;
max-width: 100%;
max-height: 100%;
margin: auto;
}

這種方式同樣可以使得圖片在li中水平垂直居中。