在HTML5中，实现图片的竖向居中是一个常见的需求，尤其是在设计响应式布局或者需要美观的页面效果时。以下是一些实现图片竖向居中的方法：
1. 使用CSS的
display: flex;
属性
这种方法利用了Flexbox布局，可以非常方便地实现图片的竖向居中。
在这个例子中，
.container
类使用了
display: flex;
，
justify-content: center;
和
align-items: center;
属性，使得图片在容器中水平和垂直居中。
2. 使用CSS的
position: absolute;
属性
这种方法通过绝对定位和负边距来实现居中。
在这个例子中，
.image
类通过设置
position: absolute;
和使用
transform: translate(-50%, -50%);
来实现居中。
3. 使用CSS的
vertical-align: middle;
属性
这种方法适用于行内元素或表格单元格中的图片。
在这个例子中，
.container
类被设置为
display: table;
，
.image
类被设置为
display: table-cell;
，这样图片就可以在容器中垂直居中。
以上三种方法都是实现图片在HTML5中竖向居中的有效方式，你可以根据具体的需求和场景选择最适合的方法。