如何将图片库放在页面中心？

Question

我正在尝试使用HTML和CSS创建一个图库，但是我在浏览器出现在页面中间时遇到了一些麻烦。截至目前，图像（图中的灰色框）位于左侧。我希望整个画廊都集中在页面上。 任何有关这方面的帮助将非常感激！

Screenshot

＆＃13;

＆＃13;

#content {
  overflow: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #6b88f2;
}

.gallery {
  min-height: calc(100vh - 200px);
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem;
  background-color: #ec6e52;
}

.cell {
  margin: 0.5rem;
}

.cell img {
  display: block;
}

.responsive-image {
  max-width: 100%;
}

@media screen and (min-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .cell {
    width: calc(50% - 5rem);
  }
}

@media screen and (min-width: 1000px) {
  .cell {
    width: calc(33.3333% - 5rem);
  }
}

＆＃13;

<div id="content">

  <div class="gallery">

    <div class="grid">

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

    </div>
    <!--End grid  -->

  </div>
  <!--End gallery  -->

</div>
<!--End content  -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

我只是将text-align：center放在.grid上，知道它会逐渐消失

或者您可以使用flexbox，这将为您提供更轻松的整体时间：

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}