居中 div，项目在移动版中使用网格布局

Question

我有以下代码：

function seeMore() {
  window.location("https://inderatech.com/index.html")
}

.see-more {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 10%;
  overflow: hidden;
  /* Subtle inner border */
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar img {
  height: 70%;
  width: 70%;
  z-index: 2;
  /* Optionally add a drop shadow to the main image  */
  /* to make it feel "lifted"    */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar .background {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2);
  filter: blur(13px) opacity(0.2);
}


/* Irrelevant styling */

.Mycontainer {
  /* width: 200px; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  place-items: center;
  width: 50%;
  margin: 0 auto;
}

<div class="container">
  <div class="section-title text-center">
    <h2>Recent Clients</h2>
  </div>
</div>

<div class="Mycontainer">

  <a href="https://www.6ixangels.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
      <img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
    <img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
  </div>

  <a href="https://www.marcosbackyardswimming.ca" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./mss-transparent.png" class="background" />
      <img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
    <img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
    <img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
    <img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
  </div>

  <a href="https://app.cleaningassistant.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
      <img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://www.beaniesforbaxter.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
      <img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://6ixhottub.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
      <img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
    </div>
  </a>

</div>

<br>
<br>
<div class="see-more">
  <a href="site-pictures.html"><input type="submit" class="btn btn-defeault btn-send" value="See More"></a>
</div>

在桌面版上，它看起来不错，但如果在较窄的屏幕上呈现，那么您会看到它在页面上没有正确地水平居中。我应该在我的 CSS 中更改什么以使 div 在页面上居中？

Answer 1

使用flexbox 可以自动包装项目。（请参阅“无关样式”评论下的 CSS。）

使用 grid 似乎是个好主意，因为它很“现代”，但是当您想要创建具有多种项目类型的布局时，使用 grid 通常是有意义的。当您想自动将某些内容布局到列或行中而不设置固定的列数时，弹性框通常很有用。

.see-more {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 10%;
  overflow: hidden;
  /* Subtle inner border */
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar img {
  height: 70%;
  width: 70%;
  z-index: 2;
  /* Optionally add a drop shadow to the main image  */
  /* to make it feel "lifted"    */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar .background {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2);
  filter: blur(13px) opacity(0.2);
}


/* Irrelevant styling */

.Mycontainer {
  /* width: 200px; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 50%;
  margin: 0 auto;
}

<div class="container">
  <div class="section-title text-center">
    <h2>Recent Clients</h2>
  </div>
</div>

<div class="Mycontainer">

  <a href="https://www.6ixangels.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
      <img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
    <img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
  </div>

  <a href="https://www.marcosbackyardswimming.ca" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./mss-transparent.png" class="background" />
      <img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
    <img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
    <img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
    <img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
  </div>

  <a href="https://app.cleaningassistant.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
      <img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://www.beaniesforbaxter.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
      <img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://6ixhottub.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
      <img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
    </div>
  </a>

</div>

<br>
<br>
<div class="see-more">
  <a href="site-pictures.html"><input type="submit" class="btn btn-defeault btn-send" value="See More"></a>
</div>
<script>
  function seeMore() {
    window.location("https://inderatech.com/index.html")
  }
</script>

居中 div，项目在移动版中使用网格布局

Center div with items laid out using grid on mobile version

html

javascript

css

layout

grid-layout