如何将display为inline-block的最后一个Tile元素（Tile 5）居中显示

你可以通过仅修改CSS代码实现Tile 5居中的效果，不会影响原有动画交互逻辑，修改步骤如下：

1. 首先添加全局样式，让最后一个Tile强制换行，避免和前一个Tile同排：

.Tile:last-child {
  clear: both;
}

2. 在min-width: 30em的两列布局媒体查询中，添加如下样式，让最后一个Tile水平居中，同时修正它的弹出层位置和箭头位置：

@media (min-width: 30em) {
  /* 原有代码保留，新增以下内容 */
  .Tile:last-child {
    margin-left: 25%;
  }
  .Tile:last-child .Tile-flyout {
    margin-left: -25%;
  }
  .Tile:last-child .Tile-flyout:before {
    left: 25%;
  }
}

3. 在min-width: 48em的三列布局媒体查询中，添加如下样式，适配三列布局下的居中效果：

@media (min-width: 48em) {
  /* 原有代码保留，新增以下内容 */
  .Tile:last-child {
    margin-left: 33.3333333333%;
  }
  .Tile:last-child .Tile-flyout {
    margin-left: -33.3333333333%;
  }
  .Tile:last-child .Tile-flyout:before {
    left: 50%;
  }
}

以上方案完全适配你现有布局逻辑，所有Tile的点击展开、动画效果都可以正常运行，移动端下Tile默认100%宽度，本身就是居中状态，不需要额外调整。

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