在DIVs中包含的一系列图像的垂直对中出现问题

Question

我有一种简单的方法来显示一系列水平中心的图像，方法是根据图像数量在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>

​

Answer 1

如果你的图像高度不同，你可以使用flex。

以下是代码笔链接：

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

如果您需要从整页中对它们进行居中，请参见此。

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

Answer 2

尝试将图像设置为块元素：

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

Answer 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>

​

希望这对你有帮助！