Html 无法将div中包含的一系列图像垂直居中

我有一个简单的方法来显示一系列水平居中的图像，方法是根据图像数量在CSS中更改

.container{width:20%；}

（即5个图像=宽度：20%；，4个图像=宽度：25%，3个图像=宽度：33.333%，依此类推）

但是，我无法将整套图像垂直居中。例如，我尝试了

margin:auto

，但没有成功。代码如下

问题：

如何在页面上垂直居中放置下面的一系列图像

图像：

当前显示方式，位于垂直顶部：

其显示方式，位于垂直中心：

div.box
img{
宽度：100%；
高度：自动；
背景颜色：蓝色；
}
分区注释{
填充：20px；
文本对齐：居中；
}
* {
框大小：边框框；
}
.集装箱{
填充：0 20px；
浮动：左；
宽度：20%；
}

方框1
方框2
方框3
方框4
方框5

尝试将图像设为块元素：

img{
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
    background-color: blue;
}

---

如果图像的高度彼此不同，可以使用flex

以下是代码笔链接：

[Codepen](http://codepen.io/bizedkhan/pen/vmmOBR)

如果您需要将它们从整页居中，请参见此

[Codepen](https://codepen.io/bizedkhan/pen/YVVXXa)  

---

使用您的代码，我成功地将这些框放在中心：

div.box
img{
宽度：100%；
高度：自动；
背景颜色：蓝色；
}
分区注释{
填充：20px；
文本对齐：居中；
}
* {
框大小：边框框；
}
.集装箱{
填充：0 20px；
宽度：20%；
}

方框1







方框2







方框3







方框4







方框5

不幸的是，这似乎没有使图像垂直居中。你能提供一个屏幕截图或某种形式的视觉效果来说明你期望的结果是什么吗？很好，我应该在开始时添加图像。现在包括在上面。搜索SO时可能会找到重复的和大量其他答案。谢谢，@Rob。我试过了，bu链接示例中的代码似乎没有使用上面的代码。链接示例中的代码似乎基于图像大小居中，而不是响应页面的全高。我将重试，看看是否遗漏了一些内容。谢谢，但不幸的是，第一个示例似乎没有垂直居中图像，第二个示例仅居中图像在某些浏览器上垂直显示图像。一个通用的非flex方法会更好。只是添加，第一个选项垂直居中元素，但我想要一个选项，该选项将页面上的所有元素垂直居中在一起。不幸的是，这不起作用，这是水平居中，而不是垂直。很抱歉，在这种情况下，我不知道如何使用cen三件事情垂直。不麻烦，谢谢你花时间尝试帮助！