屏幕低于 768 像素时将 div 项目居中？答案

【问题标题】：Centering div items when screen is under 768px?屏幕低于 768 像素时将 div 项目居中？
【发布时间】：2018-12-19 21:50:45
【问题描述】：

问题：我的产品网格不会在 576 像素以下居中。

问题：如何创建 css 使产品在 576px 下居中

我想在屏幕尺寸低于 768 时让产品居中。这主要用于移动设备，因为我将图像大小调整为更小，因此每行可以容纳 2 个，但它们稍微向左对齐。

这是 html：

<div class="right">
   <div class="center">
      <h1>Talent</h1>
   </div>    
   <div class="product-">
      <% @listings.each do |listing| %>
        <div class="image-circle">
            <div class="listing-page-images" id="listing-image-resize">
                <%= link_to image_tag(listing.image_url(:listing_index_4), id: "listing-image-resize-2"), listing, id: "listing-image-resize", data: {id: listing.id, name: listing.name} %>
            </div>
            <div class="text-over">
               <p><%= link_to listing.user.name, listing, id: "" %></p>
            </div>
         </div>
      <% end %>
   </div>
</div>

css：

.right {
  flex: 70%;
  padding: 15px;
  padding-top: 20px;
  font-family: Helvetica, sans-serif ;
  font-weight: 600 ;
}

 .product- {
   padding-top: 30px;
   display: flex;
   flex-wrap: wrap;
 }

@media only screen and (max-width: 576px) {
   #listing-image-resize {
     width:  100px !important;
     height:  150px !important;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     max-width: 100%;
     max-height: 100%;
   }
   #listing-image-resize-2 {
     position: absolute;
     width:  100px !important;
     height:  150px !important;
     top: 50%;
     left: 50%;
     max-width: 100%;
     max-height: 100%;
   }

 }

我注意到的一件事是，从 768px 到 576px，产品以页面为中心 - 有和没有我的 @media 576px css 规则。

我正在使用 bootstrap 4，并且我假设它会自动执行某些操作，但我还没有找到任何答案来解决在该屏幕尺寸范围内发生的事情以使所有内容居中。

这都包含在一个没有@media css 规则的 body 标记中。

【问题讨论】：

如果您需要在 .product- 中将项目居中添加 align-items: center;并证明-内容：居中；如果您需要居中 .product- 添加 margin-left: auto;和 margin-right: auto;
就是这样！如果您希望他们指出病态的绿色，请检查您是否发帖！ :)

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

如果您需要将 .product- 中的项目居中，请添加：

.product- {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;

  //Add This
  align-items: center;
  justify- content: center;
}

如果您需要居中 .product- 然后添加：

.product- {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;

  //Add This
  margin-right: auto;
  margin-left: auto;

  align-items: center;
  justify- content: center;
}

【讨论】：