+ + Unknown image width and height of the vertical center

+ + Unknown image width and height of the vertical center

The first: table-cell / inline-block
+ vertical-align conditions: receiving image width and height of the container default width and height affect
html structure:

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

css code:

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

key point:

1. display:inline-block: Such that the container (i.e. <div>) with width and height of image size change

2. vertical-align: middle : The vertical so that the image is centered in the interior of the container

3. inline-blockAnd table-cellimplement are different, the former in the size of the container and the picture size in the relevant container, which the length of the container and the length of the inner vessel image related to the height of the container maximum and that all containers in the row of the image height related

The second: "hidden objects" + vertical-align
conditions: the container is greater than the image width and height are known and default width and height
html structure:

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

css code:

        .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;
        }

key point:

1. .hidden elements are height:100%stretched from the container (i.e. .container) at the top to the bottom of the container to width:0be hidden

2. <img> a vertical-align:middleand .hidden a vertical-align:middlepredetermined <img> element and .hidden elements must be aligned in accordance with both the central

Third: Transparent .gif + background-image: url ( './ picture .jpg')
Conditions: a container width and height of image width and height are known and determined

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

html structure:

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

css code:

          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;
             }

key point:

1. transparent.gif: transparent, so that the background image a display of pictures

2. background-position: center: Background image such that the container (i.e., <img>) is centered vertically