CSS图片垂直居中

在写项目的时候，我想让一张图片垂直居中，可是又不知道怎么做，于是在网上找了一些方案，一下的方法都经过我自己的试验，在我的代码中是能够实现图片垂直居中的效果的

利用display:table-cell

div {
  height: 100vh;
  display: table-cell;
  vertical-align: middle;
  text-align: center;

  img {
    vertical-align: middle;
  }
}

背景法

div {
  width: 100%;
  border: 1px solid #f00;
  height: 100vh;
  background: url(/assets/images/068a74df58cae466fb7c6d173ce75d9a0b60ac081f807-r0XXgn.jpg) center no-repeat;
}

图片外面用个p标签，通过设置line-height使图片垂直居中

div {
  width: 100%;
  height: 100vh;
  text-align: center;

  p {
    line-height: 100vh;

    img {
      vertical-align: middle;
    }
  }
}

利用flex布局

div {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

转载于:https://my.oschina.net/u/3057435/blog/1031551