使用CSS如何实现图片垂直居中呢？

在CSS中实现图片垂直居中通常有两种方法：

1. **使用Flex布局**:
如果容器是弹性盒（flexbox）模式，可以这样做：

   <div class="container">
     <img src="your-image.jpg" alt="描述图片">
   </div>
   <style>
   .container {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   </style>

`align-items: center;`负责垂直居中，`justify-content: center;`负责水平居中。

2. **使用Grid布局** (适用于现代浏览器):
如果容器是网格（grid）布局，可以这样：

   <div class="container">
     <img src="your-image.jpg" alt="描述图片">
   </div>
   <style>
   .container {
     display: grid;
     place-items: center;
   }
   </style>

`place-items: center;`同时实现了垂直和水平居中。

3. **使用定位（Positioning）+ 容器绝对定位**:
对于传统的非flex和grid布局，可以借助`position: relative` + `top: 50%`等计算方法：

   <div class="container position-relative">
     <img src="your-image.jpg" alt="描述图片" style="position: absolute; top: 50%; transform: translateY(-50%);">
   </div>

这样图片会相对于其容器垂直居中。