小编Nif*_*fel的帖子

我正在尝试使用align-content：center将div与flexbox垂直对齐。它在 Firefox 和 IE 中工作正常，但在 Chrome 中不能垂直对齐。在 Chrome 中，div 保持在顶部。

<div class="products-wrapper">
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
      <div class="product">
          <img src="images/temporary.jpg" alt="Temporary">
          <h3>Title</h3>
          <p>Text.</p>
      </div>
</div>

和CSS：

.products-wrapper {
    width: 100%;
    min-height: 100vh;
    /* FLEX */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.product {
    max-width: 250px;
    padding: 10px;
}

.product img {
    display: block;
    margin: 0 auto;
    max-height: 250px;
    max-width: 250px;
} …