有时候需要实现在一个容器里放入的图片，不管是方的、长的、高的，也不管图片有多大或者多小，都能实现上下、左右居中显示。
那究竟怎么实现呢？
首先，说下思路：
一、添加的img图片，下面会介绍添加的是背景图如何解决。
一个ol下包含三个li，每个li里包含一个a标签，每个a标签里包含一个img标签。这里的img我分别放置了横的长方形、竖的长方形、正方形三种类型的图片。图片被a包裹有时候是为了实现点击图片可以连接到别的页面。body部分代码如下：
我们为了效果的展示，让三张图片都在一行显示。首先给ol>li的默认属性清零。给li 920px的宽，多的20px留给中间的li两边margin各10px。然后让ol的li宽高都为300px，作为放图片的容器使用，再进行左浮动实现同行显示。记住放入图片的时候， 要给图片设置大的边为容器边，小的边自适应。 让图片能在容器里完全显示。
做好这些前提工作，接下来，我们给li一个display：table；属性，给a一个display：table-cell；最后我们给a设置横向居中：text-align：center；垂直居中。vertical-align：midden；就解决啦。是不是很简单。
二、背景图片的居中显示
我们都知道，背景图片，可以用background-opsition设置位置。所以在固定宽高的容器里直接给x、y方向一个居中（center）就好啦。至于图片太大、或太小不能很好在容器里展示，我们给background-size（图片大小设置）一个contain（图片中大的边全部显示，小的边自适应）【cover：图片中小的边全部显示，大的边自适应】
