有時候需要實現(xiàn)在一個容器里放入的圖片，不管是方的、長的、高的，也不管圖片有多大或者多小，都能實現(xiàn)上下、左右居中顯示。

那究竟怎么實現(xiàn)呢？

首先，說下思路：

一、添加的img圖片，下面會介紹添加的是背景圖如何解決。

一個ol下包含三個li，每個li里包含一個a標簽，每個a標簽里包含一個img標簽。這里的img我分別放置了橫的長方形、豎的長方形、正方形三種類型的圖片。圖片被a包裹有時候是為了實現(xiàn)點擊圖片可以連接到別的頁面。body部分代碼如下：

我們?yōu)榱诵Ч恼故?，讓三張圖片都在一行顯示。首先給ol>li的默認屬性清零。給li 920px的寬，多的20px留給中間的li兩邊margin各10px。然后讓ol的li寬高都為300px，作為放圖片的容器使用，再進行左浮動實現(xiàn)同行顯示。記住放入圖片的時候， ? 要給圖片設置大的邊為容器邊，小的邊自適應。 ? ?讓圖片能在容器里完全顯示。

做好這些前提工作，接下來，我們給li一個display：table；屬性，給a一個display：table-cell；最后我們給a設置橫向居中：text-align：center；垂直居中。vertical-align：midden；就解決啦。是不是很簡單。

二、背景圖片的居中顯示

我們都知道，背景圖片，可以用background-opsition設置位置。所以在固定寬高的容器里直接給x、y方向一個居中（center）就好啦。至于圖片太大、或太小不能很好在容器里展示，我們給background-size（圖片大小設置）一個contain（圖片中大的邊全部顯示，小的邊自適應）【cover：圖片中小的邊全部顯示，大的邊自適應】