无法将 DIV 中包含的一系列图像垂直居中答案

【问题标题】：Trouble vertically centering a series of images contained in DIVs无法将 DIV 中包含的一系列图像垂直居中
【发布时间】：2017-04-30 06:56:29
【问题描述】：

我有一个简单的方法来显示一系列水平居中的图像，方法是根据图像的数量在 CSS 中更改 .container {width: 20%;}（即 5 个图像 = 宽度：20%；4 个图像 = 宽度：25%， 3 张图片 = 宽度：33.333% 等等。

但是，我无法将整组图像垂直居中。例如，我尝试过margin: auto，但没有成功。代码如下。

https://codepen.io/anon/pen/PmmwQR

问题：

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

图片：

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

它应该如何显示，位于垂直中心：

div.box
 img {
    width: 100%;
    height: auto;
    background-color: blue;
}
div.note {
    padding: 20px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
.container {
    padding: 0 20px;
    float: left;
    width: 20%;
}

<div class="container">
  <div class="box">
      <img src="image-1" />
    <div class="note">Box 1</div>
  </div>
</div>

<div class="container">
  <div class="box">
      <img src="image-2" />
    <div class="note">Box 2</div>
  </div>
</div>

<div class="container">
  <div class="box">
      <img src="image-3" />
    <div class="note">Box 3</div>
  </div>
</div>

<div class="container">
  <div class="box">
      <img src="image-4" />
    <div class="note">Box 4</div>
  </div>
</div>

<div class="container">
  <div class="box">
      <img src="image-5" />
    <div class="note">Box 5</div>
  </div>
</div>

【问题讨论】：

您能否提供屏幕截图或某种形式的视觉效果来说明您期望的结果是什么？
好点，我应该在开头添加图像。现在包括在上面。
Divs and vertical centering images inside divs 的可能重复项以及通过搜索找到的许多其他答案。
谢谢，@Rob。我试过了，但链接的例子似乎没有使用上面的代码。链接示例中的代码似乎基于图像大小居中，而不是响应页面全高。我会再试一次，看看我是否遗漏了什么。

标签： html css optimization center vertical-alignment

【解决方案1】：

如果您的图片高度不同，您可以使用 flex。

这里是代码笔链接：

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

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

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

【讨论】：

谢谢，但不幸的是，第一个似乎没有垂直居中图像，第二个仅在某些浏览器上垂直居中图像。一个通用的非弹性方法会更好。
只是补充一下，第一个选项将元素垂直居中，但我想要一个选项将页面上的所有元素垂直居中。

【解决方案2】：

尝试将图像设为块元素：

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

【讨论】：

不幸的是，这似乎没有使图像垂直居中。

【解决方案3】：

使用您的代码，我设法将这些框放在中心：

div.box
 img {
    width: 100%;
    height: auto;
    background-color: blue;
}
div.note {
    padding: 20px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
.container {
    padding: 0 20px;
    width: 20%;
}

<div align="center">
<div class="container">
  <div class="box">
      <img src="image-1" />
    <div class="note">Box 1</div>
  </div>
</div>
<br><br><br><br><br><br>
<div class="container">
  <div class="box">
      <img src="image-2" />
    <div class="note">Box 2</div>
  </div>
</div>
<br><br><br><br><br><br>
<div class="container">
  <div class="box">
      <img src="image-3" />
    <div class="note">Box 3</div>
  </div>
</div>
<br><br><br><br><br><br>
<div class="container">
  <div class="box">
      <img src="image-4" />
    <div class="note">Box 4</div>
  </div>
</div>
<br><br><br><br><br><br>
<div class="container">
  <div class="box">
      <img src="image-5" />
    <div class="note">Box 5</div>
  </div>
</div>
</div>

希望对您有所帮助！

【讨论】：

不幸的是，这不起作用，它水平居中而不是垂直居中。
对不起，我不知道如何垂直居中。
没问题，感谢您花时间尝试帮助！