如何实现Angular中ng-repeat最后一行元素居中对齐？

这个需求很常见，我给你几个可行的方案，结合你现有的Angular和Bootstrap代码来实现：

方案一：改用CSS Grid布局（最推荐，代码最少） #

Grid布局天生适合这种行列排列的场景，能轻松实现最后一行元素居中，同时还能兼顾响应式需求。

修改CSS： #

body {
  background-color: rgb(247, 247, 247);
}
.LaunchTrackerBrands {
  margin-top: 5em;
  /* 改用Grid布局 */
  display: grid;
  grid-gap: 2em; /* 替代原来的margin-left，控制元素间距 */
  justify-items: center; /* 让每个元素在单元格内居中 */
}
.Brandtracker {
  /* 去掉原有的margin-left，用grid-gap统一控制间距 */
  margin: 20px 0;
}
/* 响应式配置：md屏幕每行4个，sm屏幕每行2个，xs屏幕每行1个 */
@media (min-width: 992px) {
  .LaunchTrackerBrands {
    grid-template-columns: repeat(4, auto);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .LaunchTrackerBrands {
    grid-template-columns: repeat(2, auto);
  }
}
@media (max-width: 767px) {
  .LaunchTrackerBrands {
    grid-template-columns: 1fr;
  }
}
/* 保留你原来的其他样式 */
.BrandName {
  background-color: white;
  border-radius: 10px;
  box-shadow: 2px 2px 2px #999;
  margin: 0;
  width: 150px;
}
.BrandName a img {
  padding: 0.5em;
  width: auto;
  height: auto;
  max-width: 100%;
}
.Metaname {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #f8f8f8;
  padding: 4px;
  position: relative;
  overflow: hidden;
}
.inner-triangle {
  border-right: 25px solid transparent;
  border-bottom: 25px solid transparent;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 4;
}

修改HTML： #

删掉原来的clear:both相关CSS（.LaunchTrackerBrands :nth-child(4n+1) { clear: both; }），因为Grid布局不需要float和clear。你的HTML结构可以保持不变，Grid会自动处理排列。

这样不管最后一行有1、2还是3个元素，都会自动在该行居中显示，同时响应式也能正常工作。

方案二：结合Angular动态计算添加样式（兼容原有float布局） #

如果你不想修改现有布局，可以通过Angular计算最后一行的元素数量，给这些元素添加特殊类，再用CSS调整margin实现居中。

第一步：在控制器中计算最后一行元素数量 #

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
  $scope.LauncherData = [/* 你的数据数组 */];
  
  // 计算最后一行的元素数量
  var totalItems = $scope.LauncherData.length;
  $scope.lastRowCount = totalItems % 4;
  // 如果刚好整除，最后一行是4个，不需要特殊处理
  if ($scope.lastRowCount === 0) {
    $scope.lastRowCount = 4;
  }
});

第二步：在ng-repeat中添加动态类 #

<div class="col-md-2 col-sm-4 Brandtracker" 
     ng-repeat="data in LauncherData"
     ng-class="{'last-row-item': $index >= LauncherData.length - lastRowCount}">
  <!-- 你的元素内容 -->
</div>

第三步：添加CSS调整最后一行元素的margin #

根据最后一行的元素数量，分别设置margin让它们居中：

/* 保留你原来的其他CSS */
.LaunchTrackerBrands :nth-child(4n+1) {
  clear: both;
}

/* 最后一行只有1个元素时，让它水平居中 */
.LaunchTrackerBrands .last-row-item:nth-last-child(1):nth-child(4n+1) {
  margin-left: calc((100% - 150px - 4em) / 2);
  /* 150px是BrandName的宽度，4em是原有的左右margin总和，根据实际情况调整 */
}

/* 最后一行有2个元素时，调整它们的间距让整体居中 */
.LaunchTrackerBrands .last-row-item:nth-last-child(2):nth-child(4n+1),
.LaunchTrackerBrands .last-row-item:nth-last-child(2):nth-child(4n+2) {
  margin-left: calc((100% - 2*(150px + 4em)) / 3);
}

/* 最后一行有3个元素时，调整间距让整体居中 */
.LaunchTrackerBrands .last-row-item:nth-last-child(3):nth-child(4n+1),
.LaunchTrackerBrands .last-row-item:nth-last-child(3):nth-child(4n+2),
.LaunchTrackerBrands .last-row-item:nth-last-child(3):nth-child(4n+3) {
  margin-left: calc((100% - 3*(150px + 4em)) / 4);
}

这种方法需要精确计算margin值，适合不能修改原有布局的场景，但维护起来比Grid布局麻烦一些。

内容的提问来源于stack exchange，提问作者Shubham Mundhra