css中怎么设置图片垂直居中显示

在网页设计中，我们会经常用到图片，在一些场景下，需要将图片垂直居中显示，那我们应该怎么做呢？今天就来介绍一下CSS中如何设置图片垂直居中显示。
先来看看常见的HTML代码：

 < p >段落内容< img src="图片路径" alt="图片描述" >< /p > 

在这段HTML代码中，我们可以看到段落中嵌套了一个图片，那么如何让这个图片垂直居中呢？接下来我们将介绍两种方式。
1. 使用CSS的vertical-align属性
这是一种比较常见的方式，我们可以使用CSS中的vertical-align属性，将图片的vertical-align属性设置为middle，如下：

 < style >
           img{
              vertical-align:middle;
           }
      < /style >
      < p >段落内容< img src="图片路径" alt="图片描述" >< /p > 

上述代码中，我们使用了内联样式表，将图片的vertical-align属性设置为middle。通过这种方式，我们可以将图片相对于文字垂直居中。
2. 使用CSS的transform属性
另一种方式是使用CSS中的transform属性，将图片进行旋转操作，如下：

 < style >
           img{
              transform:translateY(-50%);
           }
      < /style >
      < p >段落内容< img src="图片路径" alt="图片描述" >< /p > 

上述代码中，我们使用了内联样式表，将图片的transform属性设置为translateY(-50%)。通过这种方式，我们将图片进行向上平移50%的操作，相对于文字实现了垂直居中的效果。
总结
两种方式实现的效果相似，但是在实际使用中，应该根据具体的场景选择不同的方式。其中第一种方式比较直观，适用于需要图文混排的场景；第二种方式则适用于纯图片展示的场景，例如图片轮播等。