+ +未知の画像の幅と垂直中心の高さ

+ +未知の画像の幅と垂直中心の高さ

最初の表セル/インラインブロック
+垂直整列条件：受信画像の幅とコンテナのデフォルトの幅と高さの高さに影響
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実装、異なる前者関連容器、コンテナ、および画像サイズの大きされる容器の長さとに関連した内部容器の画像の長さ容器の高像高の列内のすべてのコンテナの最大値とその関連

第二の「隠されたオブジェクト」+垂直整列
条件：容器は、画像の幅と高さよりも大きい知られており、デフォルトの幅と高さの
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> A vertical-align:middle及びA .hidden vertical-align:middle所定の両方の中央に合わせて整列されなければならない<IMG>要素と.hidden要素

第三：透明.GIF +背景画像：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>）されている垂直中心