图片 + 未知宽高 + 垂直居中

第一种： table-cell / inline-block + vertical-align
条件： 容器宽高受图片默认宽高影响
html结构：

        <div><img src="./image.jpg" alt=""></div>

css代码：

      div {display: inline-block;/*display: table-cell;*/padding: 10px;border: 2px solid #aaa;}img {vertical-align: middle;}

关键点：

1. display:inline-block ：使得容器(即<div>)的宽度和高度随图片大小改变

2. vertical-align: middle ：使得图片在容器内部垂直居中

3. inline-block和table-cell实现起来有区别，前者中容器的大小与这个容器内的图片大小有关，后者中容器的长度与这个容器内图片的长度有关，容器的高度与那一行中所有容器内图片高度的最大值有关

第二种：“隐藏物体” + vertical-align
条件： 容器宽高已知且大于图片默认宽高
html结构：

    <div class="container">        <img src="./image.jpg" alt=""><span class="hidden"></span></div>

css代码：

        .container {width: 800px;height: 600px;border: 2px solid #ddd;text-align: center;}img {vertical-align: middle;}.hidden {height: 100%;width: 0;vertical-align: middle;display: inline-block;}

关键点：

1. .hidden元素以height:100%伸张自容器(即.container)顶部到容器底部，以width:0加以隐藏

2. <img>的vertical-align:middle和.hidden的vertical-align:middle规定<img>元素和.hidden元素必须根据双方的中部对齐排列

第三种：透明.gif + background-image:url('./图片.jpg')
条件： 容器宽高已知且决定图片宽高

    'transparent.gif':    透明的gif格式图片;'background-image':   需要展示的图片;

html结构：

        <li><img src="./transparent.gif" alt=""></li>

css代码：

          li {list-style: none;width: 256px;height: 256px;padding: 20px;border: 2px solid #ddd;}img{width: 100%;height: 100%;display: block;background-position: center;background-image: url('./image.jpg');background-size: 100%;background-repeat: no-repeat;}

关键点：

1. transparent.gif ：透明，使得背景图片成为展示图片

2. background-position: center ：使得背景图片在容器(即<img>)中垂直居中