CSS是一种用于网页设计和页面布局的语言。它可以很好地控制网页的样式和排版效果。而当我们在设计网页的时候，经常需要将图片垂直居中显示。下面就来介绍一下如何使用CSS实现图片垂直居中。

首先，我们在HTML中使用img标签来插入图片，并将其放在一个div容器内。为了让图片垂直居中，我们需要给这个容器设置一定的高度。在CSS中，我们可以使用height属性来设置盒子的高度。

<div class="box">
<img src="示例图片.jpg" alt="示例图片">
</div>
.box {
height: 400px;
}

接着，在样式中给img标签添加margin属性，并设置为auto。这样就可以使图片水平居中显示。接下来，我们需要将图片垂直居中。这可以通过设置图片的定位来实现。我们将图片的position属性设置为absolute，再设置top和bottom属性为0，这样就可以让图片垂直居中了。

.box {
height: 400px;
position: relative;
}
.box img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}

上面的代码中，我们通过设置盒子的position为relative，再将img标签的position属性设置为absolute，使得图片可以相对于盒子定位。并通过top和bottom属性来使图片垂直居中。

综上所述，通过设置CSS样式中的盒子高度、图片margin以及定位属性，即可实现图片垂直居中了。