css垂直图片 |css3的过渡效果的名称

首先，大家可以使用CSS的vertical-align属性来控制图片的对齐方式。该属性可以设置在img标签上，具体使用方法如下：

img {
vertical-align: middle; /* 垂直居中对齐 */
}

在此基础上，大家还可以使用绝对定位或flex布局来实现更精确的垂直对齐效果。下面是使用绝对定位实现的示例：

.wrap {
position: relative;
height: 200px;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

在这里，大家给包裹图片的容器.wrap设置了相对定位，然后将图片的定位方式设置为绝对定位。接着，通过top和transform属性，将图片向上移动50%（即居中对齐）。

另外，大家还可以使用flex布局实现图片的垂直对齐效果。具体使用方法如下：

.wrap {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-height: 100%;
max-width: 100%;
}

在这里，大家给图片的容器.wrap添加了flex布局，并将align-items和justify-content属性都设置为center（即居中对齐）。接着，大家对图片进行了宽高的限制，确保图片能够按比例缩放。

综上所述，使用CSS控制图片的垂直方向可以达到很好的效果，让页面看起来更加精美和舒适。以上介绍的技巧只是其中的一些，实际应用过程中可以根据具体情况进行调整和优化。