img图片实现垂直居中

当我们插入的图片小于父盒子的时候，图片就会默认在左上角显示。

一、先给父盒子添加 text-aling:centor; 使图片在水平居中显示。
二、在img标签后添加一个行内块标签（如果不是可转换为行内块）。
三、设置span标签样式（span宽度可以为0，高度100%自适应）

span {
    display: inline-block;
    width: 0;
    height: 100%;
    background: red;
    vertical-align: middle;
}

四、给img标签也添加 vertical-align: middle;

总体代码如下：

html代码

<!-- html -->
<div class="box">
    <img src="images/005.png" alt="">
    <span></span>
  </div>

css代码：

<style>
    div {
      width: 600px;
      height: 500px;
      background-color: #86d2f0;
      margin: 100px auto;
      border: 1px solid red;
      /* 第一步 */
      text-align: center;
    }

    span {
      display: inline-block;
      width: 0;
      height: 100%;
      background: red;
      vertical-align: middle;
    }

    img {
      vertical-align: middle;
    }
  </style>