img实现垂直居中

当在一个给定宽高盒子内加入img标签插入一张图片，图片宽高小于盒子时，图片默认在左上角显示。

实现代码：

style样式

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

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

实现过程

代码示例

代码运行结果

1、第一步，首给盒子添加 text-aling:centor; 使文本水平居中显示。

添加 text-aling:centor; 样式后显示结果：

 

2、第二步，在img标签后添加一个常用标签（下文引用span标签为例）。

 

3、第三步，设置span标签样式（span宽度不能省，高度100%自适应）：

display: inline-block;

width: 0;

height: 100%;

background: red;

vertical-align: middle;

4、第四步，给img标签添加 vertical-align: middle; 属性

最后效果